Initial commit
This commit is contained in:
qwq
+625
@@ -0,0 +1,625 @@
|
||||
<!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-A Series</h2>
|
||||
</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-slate-800 mb-8">面向高能效应用的多核RISC-V应用处理器：</br>Wing-A500</h3>
|
||||
<p class="text-lg md:text-xl text-slate-600 mb-8 max-w-2xl mx-auto" style="line-height:1.6;">
|
||||
Wing-A500 是一款基于开源 RISC-V 架构打造的 64 位、双发射、9
|
||||
级流水处理器，其在架构设计、性能表现以及功能特性上的卓越表现，使其成为高能效应用处理器领域的佼佼者。同时，Wing-A500兼容 RVA23 规范，确保了与现有 RISC-V
|
||||
生态系统的良好兼容性，便于开发者快速集成和开发应用。产品适用于人工智能、具身智能、自动驾驶、5G/6G网络通讯、安全等领域。
|
||||
</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-A500 处理器IP架构</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/04/20260407-1705381.png"
|
||||
alt="Wing-A500 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-A500 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">SPECint2006</span>
|
||||
<span class="font-medium text-2xl" style="color: #4cd6b4;">5/GHz</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">RV64GCBVK</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">9-stage, In-order, two-issue</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Privilege Mode</span>
|
||||
<span class="font-medium text-slate-800 text-right">Machine Mode, User Mode, Supervisor Mode
|
||||
and
|
||||
Hypervisor Extension</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">Support AIA 1.0</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">JTAG/APB </span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">External Bus</span>
|
||||
<span class="font-medium text-slate-800">2x AXI/CHI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between">
|
||||
<span class="text-slate-500">Memory System</span>
|
||||
<span class="font-medium text-slate-800 text-right">I/D Cache(up to 64KB) L2 Cache (up to 2MB) MMU
|
||||
and optional PMP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 关键特性 -->
|
||||
<section id="key-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="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
||||
<div
|
||||
class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fa fa-file-code-o text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">兼容RVA23 Profile规范</h4>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in flex flex-col items-center text-center"
|
||||
style="transition-delay: 0.1s">
|
||||
<div class="w-16 h-16 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fa fa-server text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">支持Linux和Hypervisor扩展</h4>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in flex flex-col items-center text-center"
|
||||
style="transition-delay: 0.2s">
|
||||
<div class="w-16 h-16 bg-primary-10 rounded-full flex items-center justify-center mb-4">
|
||||
<i class="fa fa-sitemap text-primary text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">支持异构多核平台</h4>
|
||||
</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">64位顺序双发射架构的高能效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.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">支持运行Linux
|
||||
OS，满足虚拟化要求，支持Sv39以及Sv48两种地址翻译模式</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">支持符合AIA标准要求的中断控制器，支持配置线中断（Wired
|
||||
Interrupts）以及消息中断（MSIs)</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">支持可信执行环境（TEE），支持灵活地管理飞地（enclave）</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">支持硬件多核一致性，支持多核异构平台，支持共享L3 Cache以及私有L2
|
||||
Cache</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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 Vector
|
||||
1.0标准的矢量计算单元，可根据应用需求灵活配置矢量宽度</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">基于ArchitStudio敏捷开发平台的客制化指令集扩展功能</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 技术优势 -->
|
||||
<section id="advantages" 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="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-bolt 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.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-cogs text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">高可配置性</h4>
|
||||
<p class="text-slate-600">
|
||||
支持模块化扩展与本土化定制，结合RISC-V开放生态，为国产化系统提供安全可控、可持续演进的核心算力支撑。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. 应用场景 -->
|
||||
<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-A500处理器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-cogs"></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.1s">
|
||||
<i class="fa fa-android"></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-car"></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-wifi"></i> 5G/6G网络通讯
|
||||
</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.4s">
|
||||
<i class="fa fa-shield"></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-cogs text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">人工智能</h4>
|
||||
<p class="text-slate-600">
|
||||
提供强大的计算能力支持复杂的AI模型训练和推理，加速深度学习算法在边缘设备上的部署，满足AI应用对高性能和低延迟的需求。
|
||||
</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-android 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-car 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-wifi text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">5G/6G网络通讯</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.4s">
|
||||
<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-shield 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-A500 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-A500 处理器技术文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||||
<span>Wing-A500 处理器集成文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||||
<span>Wing-A500 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>
|
||||
+516
@@ -0,0 +1,516 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,608 @@
|
||||
<!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-M050S安全核 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-M050S是一款专为物理安全、信息安全设计的超低功耗嵌入式RISC-V处理器IP。其兼顾低功耗、高性能、及丰富安全特性，不仅能满足企业对安全性的严格要求，同时能协助芯片厂商快速、低成本地把产品推向市场，为物联网等众多领域发展提供源源不断的安全动力。
|
||||
</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>
|
||||
<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="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-M050S 处理器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-M050S 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">RV32EB_zifencei_zicsr_zce_zicond</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">乘除法</span>
|
||||
<span class="font-medium text-slate-800">可配置M-ext/zmmul</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">Codesize 增强</span>
|
||||
<span class="font-medium text-slate-800">支持隼瞻自定义代码密度增强</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">安全特性</span>
|
||||
<span class="font-medium text-slate-800">寄存器保护:防数据泄露攻击;防功耗攻击:调试接口保护</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">特权模式</span>
|
||||
<span class="font-medium text-slate-800">支持M-mode和U-mode</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">支持可配置2线或者4线JTAG</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">中断</span>
|
||||
<span class="font-medium text-slate-800">支持矢量中断，支持快速的中断现场切换</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">面积</span>
|
||||
<span class="font-medium text-slate-800">30k-35k</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-M050S处理器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-5xl 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-car"></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.1s">
|
||||
<i class="fa fa-credit-card"></i> SIM卡
|
||||
</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-shield"></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-building"></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.4s">
|
||||
<i class="fa fa-exchange"></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.5s">
|
||||
<i class="fa fa-music"></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.6s">
|
||||
<i class="fa fa-lock"></i> 安全存储
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细应用场景描述 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl 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-car text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">汽车电子</h4>
|
||||
<p class="text-slate-600">
|
||||
为车载信息娱乐系统、ADAS安全模块和车身控制系统提供高安全性处理能力，满足车规安全要求，保障车辆运行安全。
|
||||
</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-credit-card text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">SIM卡</h4>
|
||||
<p class="text-slate-600">
|
||||
为SIM卡和eSIM芯片提供极小面积、高安全性的处理核心，支持加密算法加速，保障用户身份认证和通信安全。
|
||||
</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-shield 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-building 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.4s">
|
||||
<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-exchange 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.5s">
|
||||
<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-music text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">多媒体</h4>
|
||||
<p class="text-slate-600">
|
||||
为多媒体设备提供内容保护和版权管理功能，支持DRM加密和媒体数据安全传输，防止数字内容被盗版。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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-lock 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="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>
|
||||
<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="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-M050S的安全特性</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/green2.png"
|
||||
alt="Wing-M050 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</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>
|
||||
+559
@@ -0,0 +1,559 @@
|
||||
<!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-M130 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-M130是基于RISC-V架构的32位、单发射、3级流水线的支持浮点应用的微控制器。该处理具备业界领先的同级别处理器性能，兼顾功耗和成本，并具备全面的可配置性和可扩展性，适用于工业控制，物联网，可穿戴设备等领域。
|
||||
</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>
|
||||
<p class="text-slate-600 mb-6 text-center">
|
||||
Wing-M130是基于RISC-V架构的32位、单发射、3级流水线的支持浮点应用的微控制器。
|
||||
</p>
|
||||
<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-M130 处理器IP架构</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/whiteboard_exported_image-14.png"
|
||||
alt="Wing-M050 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 产品特点 -->
|
||||
<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">业界领先的架构性能，与ARM比肩的面效比与能效比</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">支持隼瞻科技自研代码压缩技术，直击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.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">支持多样化的在线/离线调试手段，可快速定位并解决故障</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">支持统一的Wlink调试工具，一站式解决不同调试接口的兼容性问题</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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">支持丰富的安全机制，满足信息安全国际CC认证</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>
|
||||
|
||||
<!-- 3. 产品参数 -->
|
||||
<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-M130 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;">2.23（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;">4.47</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">RV32I（M）（A）B（F）_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">3-stage, In-order, one-issue</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Memory System</span>
|
||||
<span class="font-medium text-slate-800">I Cache(up to 64KB); I/D TCM(up to 128KB);</br>
|
||||
Optional Memory Protect Unit(PMP)</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">Up to 4064 IRQs</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">3x AHB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. 应用场景 -->
|
||||
<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-M130处理器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-industry"></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.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-shield"></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.4s">
|
||||
<i class="fa fa-car"></i> 车规功能安全
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细应用场景描述 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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-industry 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.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-shield 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.4s">
|
||||
<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-car text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">车规功能安全</h4>
|
||||
<p class="text-slate-600">
|
||||
符合ISO 26262等车规安全标准，为车载电子系统提供高可靠性的计算平台，支持自动驾驶和智能座舱等安全关键应用。
|
||||
</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-M130 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-M130 处理器技术文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||||
<span>Wing-M130 处理器集成文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||||
<span>Wing-M130 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>
|
||||
+586
@@ -0,0 +1,586 @@
|
||||
<!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-M130A 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-M130A是基于RISC-V架构的32位、3级流水线的的微控制器。其采用双核锁步机制,提高单点故障覆盖率和潜在故障覆盖率,满足车规安全等级要求。该产品能够显著减少客户在汽车安全标准认证上的时间成本。同时，依托于RISC-V架构的模块化和高度可定制的特性，它能够适应多样化的车载系统级芯片(SoC)设计需求。
|
||||
</p>
|
||||
<div class="w-24 h-1 bg-primary mx-auto" style="background-color:var(--primary); height:4px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 架构 -->
|
||||
<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>
|
||||
<p class="text-slate-600 mb-6 text-center">
|
||||
Wing-M130A是基于RISC-V架构的32位、单发射、3级流水线的支持浮点应用的微控制器。
|
||||
</p>
|
||||
<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-M130A 处理器IP架构</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/whiteboard_exported_image-16-scaled.png"
|
||||
alt="Wing-M050 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 产品特点 -->
|
||||
<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">业界领先的架构性能，与ARM比肩的面效比与能效比</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">支持隼瞻科技自研代码压缩技术，直击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.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">支持多样化的在线/离线调试手段，可快速定位并解决故障</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">支持统一的WingLink调试工具，一站式解决不同调试接口的兼容性问题
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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">支持丰富的安全机制，满足信息安全国际CC认证</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>
|
||||
|
||||
<!-- 3. 产品参数 -->
|
||||
<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-M130A 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;">2.23（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;">4.47</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">RV32I（M）（A）B（F）_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">3-stage, In-order, one-issue</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Memory System</span>
|
||||
<span class="font-medium text-slate-800">I Cache(up to 64KB); I/D TCM(up to 128KB);</br>
|
||||
Optional Memory Protect Unit(PMP)</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">Up to 4064 IRQs</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">3x AHB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. 应用场景 -->
|
||||
<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-M130A处理器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-industry"></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.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-shield"></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.4s">
|
||||
<i class="fa fa-car"></i> 车规功能安全
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细应用场景描述 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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-industry 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.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-shield 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.4s">
|
||||
<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-car text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">车规功能安全</h4>
|
||||
<p class="text-slate-600">
|
||||
符合ISO 26262等车规安全标准，为车载电子系统提供高可靠性的计算平台，支持自动驾驶和智能座舱等安全关键应用。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. 认证 -->
|
||||
<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>
|
||||
<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="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-M130A的车规认证</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/FS_71_220_24_1422_scan_00.jpg"
|
||||
alt="Wing-M130A Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</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-M130A 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-M130A 处理器技术文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||||
<span>Wing-M130A 处理器集成文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||||
<span>Wing-M130A 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>
|
||||
@@ -0,0 +1,618 @@
|
||||
<!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-M130S安全核 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-M130S是一款专为物理安全、信息安全设计的超低功耗嵌入式RISC-V处理器IP。其不仅继承了Wing-M130S的32
|
||||
位、单发射、3级流水线、支持浮点应用等特性，具备业界领先的同级别处理器性能。同时，它也充分考量了功耗和成本两者之间的平衡，并且兼容现存所有 RISC-V 工具。该处理器可以对标ARM
|
||||
Secure CPU SC300，适用于移动支付，多媒体以及移动存储等安全需求领域。
|
||||
</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>
|
||||
<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="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-M130S 处理器IP架构</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/whiteboard_exported_image-14.png"
|
||||
alt="Wing-M130S 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-M130S 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;">2.23（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;">4.47</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">RV32EB_zifencei_zicsr_zce_zicond</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">乘除法</span>
|
||||
<span class="font-medium text-slate-800">可配置M-ext/zmmul</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">Codesize 增强</span>
|
||||
<span class="font-medium text-slate-800">支持隼瞻自定义代码密度增强</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">安全特性</span>
|
||||
<span class="font-medium text-slate-800">寄存器保护:防数据泄露攻击;防功耗攻击:调试接口保护</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">浮点</span>
|
||||
<span class="font-medium text-slate-800">支持zfinx</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">特权模式</span>
|
||||
<span class="font-medium text-slate-800">支持M-mode和U-mode</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">支持可配置2线或者4线JTAG</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">中断</span>
|
||||
<span class="font-medium text-slate-800">支持矢量中断，支持快速的中断现场切换</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">面积</span>
|
||||
<span class="font-medium text-slate-800">78k-82k</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Trace</span>
|
||||
<span class="font-medium text-slate-800">支持</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>
|
||||
|
||||
<!-- 1. 应用场景 -->
|
||||
<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-M130S处理器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-5xl 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-car"></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.1s">
|
||||
<i class="fa fa-credit-card"></i> SIM卡
|
||||
</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-shield"></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-building"></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.4s">
|
||||
<i class="fa fa-exchange"></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.5s">
|
||||
<i class="fa fa-music"></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.6s">
|
||||
<i class="fa fa-lock"></i> 安全存储
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细应用场景描述 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl 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-car text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">汽车电子</h4>
|
||||
<p class="text-slate-600">
|
||||
为车载信息娱乐系统、ADAS安全模块和车身控制系统提供高安全性处理能力，满足车规安全要求，保障车辆运行安全。
|
||||
</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-credit-card text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">SIM卡</h4>
|
||||
<p class="text-slate-600">
|
||||
为SIM卡和eSIM芯片提供极小面积、高安全性的处理核心，支持加密算法加速，保障用户身份认证和通信安全。
|
||||
</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-shield 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-building 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.4s">
|
||||
<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-exchange 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.5s">
|
||||
<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-music text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">多媒体</h4>
|
||||
<p class="text-slate-600">
|
||||
为多媒体设备提供内容保护和版权管理功能，支持DRM加密和媒体数据安全传输，防止数字内容被盗版。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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-lock 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>
|
||||
|
||||
<!-- 4. 安全 -->
|
||||
<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>
|
||||
<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="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-M130S的安全特性</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/未标题-1.png"
|
||||
alt="Wing-M130S Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</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-M130S 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-M130S 处理器技术文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||||
<span>Wing-M130S 处理器集成文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||||
<span>Wing-M130S 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>
|
||||
+491
@@ -0,0 +1,491 @@
|
||||
<!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-M510 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-M510是基于RISC-V架构的32位、双发射、8级流水，面向高可靠性高实时性的微控制器。其可支持Vector指令集扩展，满足车规ASIL-B/ASIL-D功能安全等级需求，具备强中断实时性处理能力，适用于汽车域控制器、存储设备、多媒体、工控以及网络设备（Wifi/5G）等领域。
|
||||
</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-M510 处理器IP架构</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/whiteboard_exported_image-20.png"
|
||||
alt="Wing-M510 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. 产品参数 -->
|
||||
<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-M510 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 font-bold text-2xl">Dhrystone</span>
|
||||
<span class="font-bold text-2xl" style="color: #4cd6b4;">3.0 (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 font-bold text-2xl">Coremark</span>
|
||||
<span class="font-bold text-2xl" style="color: #4cd6b4;">5.5</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>
|
||||
<span class="font-bold text-xl" style="color: #4cd6b4;">支持1-4核的多核配置</span>
|
||||
<div class="grid md:grid-cols-2 gap-6 pt-4">
|
||||
<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">RV32IMBAFDV_zce_zicond</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">8-stage, In-order, two-issue</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">Function Safety</span>
|
||||
<span class="font-medium text-slate-800">ASIL-B (Split Mode), ASIL-D</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Privilege Mode</span>
|
||||
<span class="font-medium text-slate-800">Machine, Supervisor and User Mode,</br> supporting
|
||||
Hypervisor</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">Up to 4064 IRQs</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">JTAG/APB</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||
<span class="text-slate-500">External Bus</span>
|
||||
<span class="font-medium text-slate-800">2x AHB/AXI</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">Memory System</span>
|
||||
<span class="font-medium text-slate-800">I/D Cache(up to 64KB)；I/D TCM(up to
|
||||
128KB)</br>Shared L2 memory</br>Optional Memory Protect Unit (PMP)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 产品特点 -->
|
||||
<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">领先的处理器架构性能，强大的控制及运算能力，支持RVV指令集扩展</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">支持INSTEND客制化指令集扩展功能，提升IP的扩展灵活性</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">支持高实时性和低中断延迟，提供极致的处理器性能</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">支持Hypervisor，可快速部署vRTOS</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel text-slate-800 p-6 rounded-xl shadow-md animate-fade-in" style="transition-delay: 0.6s">
|
||||
<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">支持可信执行环境（TEE），提供安全且高效的高性能算力</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">支持先进的操作系统与应用迁移技术 WingBridge，提升生态兼容性</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">高可靠性，可同时满足车规ASIL-B/ASIL-D等级要求
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. 优势 -->
|
||||
<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">Wing-M510 处理器优势</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">性能优势</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/性能优势.png"
|
||||
alt="Wing-M510 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</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">实时性优势</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/未标题-2.png"
|
||||
alt="Wing-M510 Processor IP架构图" class="w-full h-auto rounded-lg" />
|
||||
</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-M510 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-M510 处理器技术文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-text-o text-blue-500 mr-2"></i>
|
||||
<span>Wing-M510 处理器集成文档</span>
|
||||
</li>
|
||||
<li class="flex items-center text-sm">
|
||||
<i class="fa fa-file-code-o text-green-500 mr-2"></i>
|
||||
<span>Wing-M510 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>
|
||||
+1303
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+1573
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,502 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- 注意：在 WordPress 中不需要 html/head/body 标签，只需保留 script 和内容容器 -->
|
||||
<div id="wingsemi-root" class="wingsemi-scope font-inter bg-slate-50 !text-slate-800 relative w-full overflow-hidden">
|
||||
|
||||
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
||||
<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>
|
||||
|
||||
|
||||
<!-- 引入 Tailwind 和 字体 -->
|
||||
<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 = {
|
||||
//以此 id 为前缀，避免污染 WordPress 其他样式
|
||||
important: '#wingsemi-root',
|
||||
theme: {
|
||||
screens: {
|
||||
'tablet': '1024px',
|
||||
'sm': '640px',
|
||||
'md': '768px',
|
||||
'lg': '1280px',
|
||||
'xl': '1536px',
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
secondary: '#0E42D2',
|
||||
accent: '#69b1ff',
|
||||
dark: '#0f172a',
|
||||
light: '#f8fafc',
|
||||
darkBg: '#1e293b',
|
||||
darkerBg: '#0f172a',
|
||||
darkCard: '#334155',
|
||||
brandBlue: '#2563EB',
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.bar-animate {
|
||||
transition: height 1.5s ease-out;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="wingsemi-wrapper" class="relative z-10 w-full min-h-screen">
|
||||
<main class="flex-1 relative z-10 w-full">
|
||||
<!-- 头部 Hero Section -->
|
||||
<section class="relative pt-20 md:pt-32 pb-20 overflow-hidden bg-transparent">
|
||||
<!-- 背景装饰 -->
|
||||
<div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-20 pointer-events-none">
|
||||
<div class="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-primary blur-3xl"></div>
|
||||
<div class="absolute top-1/2 -left-24 w-72 h-72 rounded-full bg-secondary blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
||||
<div class="max-w-5xl mx-auto text-center">
|
||||
<h1
|
||||
class="text-4xl md:text-5xl lg:text-6xl font-bold !text-slate-800 leading-tight mb-8 text-shadow animate-fade-in">
|
||||
代码密度增强技术
|
||||
</h1>
|
||||
<div
|
||||
class="inline-block px-4 py-1.5 rounded-full bg-primary/20 border border-primary/30 !text-primary font-semibold text-xl mb-6 animate-fade-in">
|
||||
超越行业标杆 ARM 的技术突破
|
||||
</div>
|
||||
<p
|
||||
class="text-lg md:text-xl !text-slate-600 mb-10 max-w-3xl mx-auto leading-relaxed animate-fade-in">
|
||||
针对 RISC-V 指令集特性深度优化，通过 Xwingc 扩展指令集、WingGCC 编译器及 WingLib 基础库的全栈协同，显著降低内存占用与芯片成本，实现超越 ARM
|
||||
的代码密度表现。
|
||||
</p>
|
||||
|
||||
<!-- 核心指标 -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 animate-fade-in">
|
||||
<div class="glass-panel/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
|
||||
<div class="text-3xl font-bold !text-primary mb-1">30%</div>
|
||||
<div class="text-xs !text-slate-500">代码空间节省</div>
|
||||
</div>
|
||||
<div class="glass-panel/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
|
||||
<div class="text-3xl font-bold !text-primary mb-1">5-20%</div>
|
||||
<div class="text-xs !text-slate-500">库体积优于竞品</div>
|
||||
</div>
|
||||
<div class="glass-panel/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
|
||||
<div class="text-3xl font-bold !text-primary mb-1">Xwingc</div>
|
||||
<div class="text-xs !text-slate-500">自主研发扩展</div>
|
||||
</div>
|
||||
<div class="glass-panel/50 backdrop-blur-sm p-4 rounded-lg border border-slate-200">
|
||||
<div class="text-3xl font-bold !text-primary mb-1">WingGCC</div>
|
||||
<div class="text-xs !text-slate-500">深度定制编译器</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 背景痛点 -->
|
||||
<section class="py-16 bg-slate-50 border-b border-slate-200">
|
||||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||
<div class="max-w-4xl mx-auto mb-12 text-center">
|
||||
<h2 class="text-3xl font-bold !text-slate-800 mb-4">技术背景与挑战</h2>
|
||||
<div class="w-20 h-1 bg-primary mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel/30 rounded-2xl p-8 md:p-12 border border-slate-200 animate-fade-in">
|
||||
<div class="flex flex-col lg:flex-row items-center gap-12">
|
||||
<div class="lg:w-1/2">
|
||||
<h3 class="text-2xl font-bold !text-slate-800 mb-4">RISC-V 的双刃剑</h3>
|
||||
<p class="!text-slate-600 mb-6 leading-relaxed">
|
||||
RISC-V 指令集以精简闻名，但在处理相同任务时，相较于 ARM 往往需要执行更多条指令。这种特性导致了<span
|
||||
class="!text-primary font-semibold">代码密度较低</span>，进而要求更大的片上内存（Memory），最终导致芯片成本的增加。
|
||||
</p>
|
||||
<div class="flex flex-col space-y-2 text-sm !text-slate-500">
|
||||
<div class="flex items-center"><span
|
||||
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更多指令需求</div>
|
||||
<div class="flex items-center"><span
|
||||
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更高内存占用</div>
|
||||
<div class="flex items-center"><span
|
||||
class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>更高硬件成本</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 示意图模拟 -->
|
||||
<div class="lg:w-1/2 w-full">
|
||||
<div class="bg-transparent p-6 rounded-xl border border-slate-200 relative">
|
||||
<div
|
||||
class="absolute -top-3 -right-3 bg-red-500 !text-slate-800 text-xs px-3 py-1 rounded-full">
|
||||
高成本痛点</div>
|
||||
<div class="grid grid-cols-2 gap-4 text-center">
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
class="h-24 bg-gray-700 rounded flex items-center justify-center !text-slate-500">
|
||||
CPU</div>
|
||||
<div
|
||||
class="h-32 bg-gray-700/50 rounded flex items-center justify-center !text-gray-500 border-2 border-dashed border-gray-600">
|
||||
Memory
|
||||
</div>
|
||||
<p class="text-sm !text-slate-500">普通 RISC-V</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
class="h-24 bg-primary/20 border border-primary/50 rounded flex items-center justify-center !text-primary">
|
||||
Wing CPU</div>
|
||||
<div
|
||||
class="h-20 bg-primary/10 border border-primary/30 rounded flex items-center justify-center !text-primary font-bold">
|
||||
优化后 Memory
|
||||
</div>
|
||||
<p class="text-sm !text-primary">隼瞻方案</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-4 text-center text-sm !text-slate-500">通过提高代码密度，显著减少对 Memory 的需求，降低
|
||||
Memory 面积与成本。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 四大技术手段 -->
|
||||
<section class="py-20 bg-transparent">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto mb-16 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold !text-slate-800 mb-6">四大技术手段</h2>
|
||||
<p class="!text-slate-500">全栈式优化策略，从指令集到工具链</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- 01 社区贡献 -->
|
||||
<div
|
||||
class="glass-panel rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group">
|
||||
<div
|
||||
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
||||
01</div>
|
||||
<h3 class="text-xl font-bold !text-slate-800 mb-3">社区贡献</h3>
|
||||
<p class="!text-slate-500 text-sm leading-relaxed mb-4">
|
||||
对 RISC-V 社区的 <span class="!text-primary">B 扩展、Zc 扩展、Zicond</span>
|
||||
等一系列标准扩展提供了有效支持，并进行了进一步优化。
|
||||
</p>
|
||||
<!-- 触发弹窗按钮 -->
|
||||
<button onclick="openModal()"
|
||||
class="flex items-center text-sm !text-primary hover:!text-accent transition-colors font-medium cursor-pointer">
|
||||
<i class="fa fa-bar-chart mr-2"></i> 查看对比
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 02 Xwingc 扩展 -->
|
||||
<div class="glass-panel rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
||||
style="transition-delay: 100ms;">
|
||||
<div
|
||||
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
||||
02</div>
|
||||
<h3 class="text-xl font-bold !text-slate-800 mb-3">Xwingc 扩展指令集</h3>
|
||||
<p class="!text-slate-500 text-sm leading-relaxed mb-4">
|
||||
支持将自主研发的<span class="!text-slate-800 font-semibold">代码密度增强指令 Xwingc 扩展</span>加入到处理器核中。
|
||||
</p>
|
||||
<div class="bg-slate-50 p-3 rounded text-xs !text-slate-600 border border-slate-200">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span>Arm: </span> <span class="font-mono glass-panel px-1 rounded">ldr r0, [r0, r1,
|
||||
lsl #2]</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span>传统RISC-V指令: </span> <span class="font-mono glass-panel px-1 rounded">sll a1,
|
||||
a1, 2; add aO,</br> a1; lw a0, O(a0)</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="!text-primary">Wing Xc:</span> <span
|
||||
class="font-mono bg-primary/20 px-1 rounded !text-primary">lwr a0, a1(a0)</span>
|
||||
</div>
|
||||
<div class="mt-2 text-[10px] text-center !text-gray-500">一条指令完成多条操作，无需额外寄存器分配</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 03 WingGCC 编译器 -->
|
||||
<div class="glass-panel rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
||||
style="transition-delay: 200ms;">
|
||||
<div
|
||||
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
||||
03</div>
|
||||
<h3 class="text-xl font-bold !text-slate-800 mb-3">WingGCC 编译器</h3>
|
||||
<p class="!text-slate-500 text-sm leading-relaxed">
|
||||
解决了 GCC 领域针对性不强的问题。完整匹配各种标准扩展指令和隼瞻自定义扩展指令，同时适配隼瞻<span
|
||||
class="!text-primary">专用高效微架构</span>，充分发挥性能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 04 WingLib 基础库 -->
|
||||
<div class="glass-panel rounded-xl p-6 border-t-4 border-primary card-hover animate-fade-in group"
|
||||
style="transition-delay: 300ms;">
|
||||
<div
|
||||
class="text-4xl font-bold !text-gray-500 mb-4 group-hover:!text-primary transition-colors">
|
||||
04</div>
|
||||
<h3 class="text-xl font-bold !text-slate-800 mb-3">WingLib 基础库</h3>
|
||||
<ul class="!text-slate-500 text-sm space-y-2 list-disc pl-4">
|
||||
<li>提供标准C库和数学库，专为 code size 和速度优化，优于竞品 <span
|
||||
class="!text-slate-800">5%~20%</span>。</li>
|
||||
<li>提供优化的 DSP 库，结合 DSA 技术，性能达竞品数倍。</li>
|
||||
<li>提供优化的第三方中间件。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 优化成果数据 -->
|
||||
<section class="py-20 bg-slate-50">
|
||||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||
<!-- 改为 items-stretch 和 justify-between，并增加 gap 以确保中间留空 -->
|
||||
<div class="flex flex-col md:flex-row items-stretch justify-between gap-12 lg:gap-16">
|
||||
|
||||
<!-- 左边文字放在容器样式里 -->
|
||||
<div
|
||||
class="md:w-[45%] w-full glass-panel/20 p-8 md:p-10 rounded-2xl border border-slate-200 animate-fade-in flex flex-col shadow-lg relative overflow-hidden group">
|
||||
<!-- 装饰光效 -->
|
||||
<div
|
||||
class="absolute -top-24 -left-24 w-64 h-64 bg-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-all duration-500 pointer-events-none">
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold !text-slate-800 mb-6 relative z-10 flex items-center">
|
||||
<span
|
||||
class="w-1.5 h-8 bg-primary rounded-full mr-4 inline-block shadow-[0_0_10px_rgba(59,130,246,0.8)]"></span>
|
||||
极致的密度优化
|
||||
</h2>
|
||||
<p class="!text-slate-600 mb-8 leading-relaxed text-lg relative z-10">
|
||||
我们的优化路径清晰可见。从基础 GCC 出发，叠加 Zc/Zicond 扩展，再引入 Wing 独有的代码密度增强技术，最终实现大幅度的空间节省。
|
||||
</p>
|
||||
|
||||
<!-- 底部信息同样放在深色容器内，增加对比度 -->
|
||||
<div
|
||||
class="mt-auto p-5 bg-transparent/80 backdrop-blur-sm border border-slate-200/50 rounded-xl relative z-10 shadow-inner group-hover:border-primary/30 transition-colors">
|
||||
<p class="text-sm !text-primary flex items-start sm:items-center">
|
||||
<i class="fa fa-info-circle mr-3 mt-1 sm:mt-0 text-lg"></i>
|
||||
<span class="leading-snug">基于 Wing-M130, Wing IDE v1.0, embench 测试案例</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 柱状图部分 -->
|
||||
<div
|
||||
class="md:w-[50%] w-full glass-panel/20 p-8 md:p-10 rounded-2xl border border-slate-200 animate-fade-in relative z-10 shadow-lg">
|
||||
<h3
|
||||
class="text-xl font-semibold !text-slate-800 mb-8 flex flex-col sm:flex-row sm:items-end gap-2">
|
||||
<span>代码密度百分比</span>
|
||||
<span class="text-sm font-normal !text-slate-500">(数值越小越好)</span>
|
||||
</h3>
|
||||
|
||||
<!-- 柱状图容器 -->
|
||||
<div id="chart-container"
|
||||
class="flex items-end justify-between space-x-2 md:space-x-4 pb-2 border-b border-gray-600"
|
||||
style="height: 280px;">
|
||||
<!-- Bar 1: GCC 100% -->
|
||||
<div class="flex-1 flex flex-col items-center h-full group">
|
||||
<div class="flex-1 w-full flex items-end justify-center">
|
||||
<!-- 修改宽度使柱体变细 w-12 -->
|
||||
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
||||
style="height: 100%;">
|
||||
<div class="absolute bottom-0 w-full bg-secondary bar-animate shadow-[0_-5px_15px_rgba(14,66,210,0.3)]"
|
||||
data-height="100" style="height: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
||||
<div class="!text-slate-800 text-lg">100%</div>
|
||||
<div class="text-xs !text-slate-500 mt-1 font-medium">GCC</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar 2: Zc/Zicond 80% -->
|
||||
<div class="flex-1 flex flex-col items-center h-full group">
|
||||
<div class="flex-1 w-full flex items-end justify-center">
|
||||
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
||||
style="height: 100%;">
|
||||
<div class="absolute bottom-0 w-full bg-blue-600 bar-animate shadow-[0_-5px_15px_rgba(37,99,235,0.3)]"
|
||||
data-height="80" style="height: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
||||
<div class="!text-slate-800 text-lg">80%</div>
|
||||
<div
|
||||
class="text-xs !text-slate-500 mt-1 font-medium glass-panel/50 px-2 py-0.5 rounded-full inline-block">
|
||||
Zc/Zicond Ext</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar 3: Wing Code Density 75% -->
|
||||
<div class="flex-1 flex flex-col items-center h-full group">
|
||||
<div class="flex-1 w-full flex items-end justify-center">
|
||||
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
||||
style="height: 100%;">
|
||||
<div class="absolute bottom-0 w-full bg-blue-500 bar-animate shadow-[0_-5px_15px_rgba(59,130,246,0.4)]"
|
||||
data-height="75" style="height: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
||||
<div class="!text-slate-800 text-lg">75%</div>
|
||||
<div
|
||||
class="text-xs !text-slate-500 mt-1 font-medium glass-panel/50 px-2 py-0.5 rounded-full inline-block">
|
||||
Wing Code Density</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bar 4: 最终优化 70% -->
|
||||
<div class="flex-1 flex flex-col items-center h-full group">
|
||||
<div class="flex-1 w-full flex items-end justify-center">
|
||||
<div class="w-10 sm:w-12 md:w-16 bg-blue-900/30 rounded-t-xl relative overflow-hidden transform group-hover:scale-x-105 transition-transform"
|
||||
style="height: 100%;">
|
||||
<div class="absolute bottom-0 w-full bg-gradient-to-t from-primary to-accent bar-animate shadow-[0_-5px_20px_rgba(105,177,255,0.5)]"
|
||||
data-height="70" style="height: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-center flex-shrink-0 transition-transform group-hover:-translate-y-1">
|
||||
<div
|
||||
class="!text-slate-800 text-xl drop-shadow-[0_0_8px_rgba(105,177,255,0.8)] !text-accent">
|
||||
70%</div>
|
||||
<div
|
||||
class="text-sm !text-slate-800 mt-1 font-bold bg-primary/20 border border-primary/30 px-2 py-0.5 rounded-full inline-block">
|
||||
最终优化</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流程箭头指示 -->
|
||||
<div
|
||||
class="mt-6 flex justify-between items-center text-xs sm:text-sm !text-slate-500 px-1 sm:px-2 pt-2">
|
||||
<div class="text-center font-medium">基础编译器</div>
|
||||
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
||||
<div class="text-center font-medium">标准扩展</div>
|
||||
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
||||
<div class="text-center font-medium">Wing 专有扩展</div>
|
||||
<div class="text-gray-600"><i class="fa fa-angle-right"></i></div>
|
||||
<div class="text-center font-bold !text-primary">极致密度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 图片弹窗 Modal -->
|
||||
<div id="imageModal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog"
|
||||
aria-modal="true">
|
||||
<!-- 遮罩层 backdrop -->
|
||||
<div class="fixed inset-0 bg-black/80 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
|
||||
|
||||
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0 pointer-events-none">
|
||||
<div
|
||||
class="relative transform overflow-hidden rounded-lg glass-panel text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl pointer-events-auto border border-slate-200">
|
||||
<!-- 关闭按钮 -->
|
||||
<button onclick="closeModal()"
|
||||
class="absolute top-4 right-4 text-slate-500 hover:text-slate-800 z-10 bg-black/50 rounded-full w-8 h-8 flex items-center justify-center transition-colors">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
|
||||
<!-- 图片内容区 -->
|
||||
<div class="p-1 glass-panel">
|
||||
<!-- 这里 src 替换为您实际的对比图地址 -->
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/12/社区贡献2.png"
|
||||
alt="Community Contribution Comparison" class="w-full h-auto rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Modal 控制脚本
|
||||
function openModal() {
|
||||
const modal = document.getElementById('imageModal');
|
||||
if (modal) {
|
||||
modal.classList.remove('hidden');
|
||||
document.body.style.overflow = 'hidden'; // 禁止背景滚动
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
const modal = document.getElementById('imageModal');
|
||||
if (modal) {
|
||||
modal.classList.add('hidden');
|
||||
document.body.style.overflow = ''; // 恢复滚动
|
||||
}
|
||||
}
|
||||
|
||||
// ESC 键关闭弹窗
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === "Escape") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 元素淡入动画
|
||||
const animateElements = document.querySelectorAll('.animate-fade-in');
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
|
||||
animateElements.forEach(element => observer.observe(element));
|
||||
|
||||
// 柱状图动画
|
||||
const chartContainer = document.getElementById('chart-container');
|
||||
const bars = document.querySelectorAll('.bar-animate');
|
||||
let chartAnimated = false;
|
||||
|
||||
const chartObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting && !chartAnimated) {
|
||||
chartAnimated = true;
|
||||
setTimeout(() => {
|
||||
bars.forEach((bar, index) => {
|
||||
const targetHeight = bar.getAttribute('data-height');
|
||||
setTimeout(() => {
|
||||
bar.style.height = targetHeight + '%';
|
||||
}, index * 200);
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
|
||||
if (chartContainer) {
|
||||
chartObserver.observe(chartContainer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
+529
@@ -0,0 +1,529 @@
|
||||
<!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: {
|
||||
screens: {
|
||||
'tablet': '1024px',
|
||||
'sm': '640px',
|
||||
'md': '768px',
|
||||
'lg': '1280px',
|
||||
'xl': '1536px',
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
secondary: '#0E42D2',
|
||||
accent: '#69b1ff',
|
||||
dark: '#0f172a',
|
||||
light: '#f8fafc',
|
||||
darkBg: '#ffffff',
|
||||
darkerBg: '#f8fafc',
|
||||
darkCard: '#ffffff'
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/* ========== WordPress 样式覆盖 ========== */
|
||||
.contact-section p,
|
||||
.contact-section p.text-slate-500,
|
||||
.contact-section .text-slate-500 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.contact-info-card p {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
.address-card p {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin-top: 4px !important;
|
||||
line-height: 1.5 !important;
|
||||
}
|
||||
|
||||
.contact-section .section-desc {
|
||||
margin: 0 auto !important;
|
||||
padding: 0 !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
.contact-section div p {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.contact-section div p:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* ========== 办公地址区域布局 ========== */
|
||||
.address-section {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.address-list {
|
||||
flex: 0 0 280px;
|
||||
min-width: 280px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
flex: 1.5;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.map-panel-inner {
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-panel-inner iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.map-panel-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0));
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.map-panel-header h4 {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.map-panel-header h4 i {
|
||||
margin-right: 8px;
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
/* ========== 地址卡片样式 ========== */
|
||||
.address-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.address-card:hover {
|
||||
border-color: #165DFF !important;
|
||||
background-color: rgba(22, 93, 255, 0.05);
|
||||
}
|
||||
|
||||
.address-card.active {
|
||||
border-color: #165DFF !important;
|
||||
background-color: rgba(22, 93, 255, 0.15);
|
||||
}
|
||||
|
||||
.address-card.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: #165DFF;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.address-card .card-icon {
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.address-card.active .card-icon {
|
||||
transform: scale(1.1);
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
.address-card h4 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* ========== 加载动画 ========== */
|
||||
.map-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.map-loading i {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
animation: spin 1s linear infinite;
|
||||
color: #165DFF;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ========== 移动端适配 ========== */
|
||||
@media (max-width: 768px) {
|
||||
.address-section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.address-list {
|
||||
flex: 1;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
flex: none;
|
||||
height: 300px;
|
||||
order: -1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.map-panel-inner {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 联系信息区域 ========== */
|
||||
.contact-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.contact-info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info-card h3 {
|
||||
margin: 0 0 8px 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-inter bg-darkerBg text-slate-700 min-h-screen">
|
||||
<!-- 联系我们 -->
|
||||
<section class="contact-section py-16 md:py-24 bg-darkBg">
|
||||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold mb-6 text-slate-900" style="margin-bottom: 24px !important;">联系我们</h2>
|
||||
<p class="section-desc text-slate-500 max-w-2xl mx-auto" style="margin: 0 auto !important;">
|
||||
如果您想了解更多关于我们的产品和服务，或者有任何合作意向，欢迎随时与我们联系
|
||||
</p>
|
||||
</div>
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="bg-darkCard shadow-lg p-8 rounded-xl shadow-lg border border-slate-200">
|
||||
<!-- 联系信息区域 -->
|
||||
<div class="contact-info-grid mb-8 pb-8 border-b border-slate-200">
|
||||
<div class="contact-info-card flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa fa-phone text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-slate-900" style="margin: 0 0 8px 0 !important;">热线电话</h3>
|
||||
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">025-58181916</p>
|
||||
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">0755-86978994</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info-card flex items-start space-x-4">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa fa-user-o text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-slate-900" style="margin: 0 0 8px 0 !important;">商务代表</h3>
|
||||
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">Jack 吴 | 17372837832</p>
|
||||
<p class="text-slate-500 text-base" style="margin: 0 !important; line-height: 1.6 !important;">jack.wu@wingsemitech.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 办公地址区域 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-6 text-slate-900 flex items-center" style="margin-bottom: 24px !important;">
|
||||
<i class="fa fa-map-marker text-primary mr-2"></i>
|
||||
办公地址
|
||||
<span class="text-xs text-gray-500 ml-2 font-normal">（点击切换查看不同城市）</span>
|
||||
</h3>
|
||||
|
||||
<div class="address-section">
|
||||
<!-- 地址列表 -->
|
||||
<div class="address-list space-y-3" id="addressList">
|
||||
<!-- 广州办公室 - 默认激活 -->
|
||||
<div class="address-card active p-4 border border-slate-200 rounded-lg"
|
||||
data-city="guangzhou"
|
||||
data-title="广州办公室"
|
||||
data-address="广州市海珠区新港东路2429号三层319-320房">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<i class="fa fa-building-o text-primary card-icon"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">广州市</h4>
|
||||
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">海珠区新港东路2429号三层319-320房</p>
|
||||
</div>
|
||||
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上海办公室 -->
|
||||
<div class="address-card p-4 border border-slate-200 rounded-lg"
|
||||
data-city="shanghai"
|
||||
data-title="上海办公室"
|
||||
data-address="上海市浦东新区郭守敬路498号19号楼502室">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<i class="fa fa-building-o text-primary card-icon"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">上海市</h4>
|
||||
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">浦东新区郭守敬路498号19号楼502室</p>
|
||||
</div>
|
||||
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 深圳办公室 -->
|
||||
<div class="address-card p-4 border border-slate-200 rounded-lg"
|
||||
data-city="shenzhen"
|
||||
data-title="深圳办公室"
|
||||
data-address="深圳市南山区科苑路16号东方科技大厦809室">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<i class="fa fa-building-o text-primary card-icon"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">深圳市</h4>
|
||||
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">南山区科苑路16号东方科技大厦809室</p>
|
||||
</div>
|
||||
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 珠海办公室 -->
|
||||
<div class="address-card p-4 border border-slate-200 rounded-lg"
|
||||
data-city="zhuhai"
|
||||
data-title="珠海办公室"
|
||||
data-address="珠海市横琴区国际科技创新中心7栋607-1室">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0 mr-3">
|
||||
<i class="fa fa-building-o text-primary card-icon"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-medium text-slate-900 text-base" style="margin: 0 !important;">珠海市</h4>
|
||||
<p class="text-slate-500 text-sm" style="margin: 4px 0 0 0 !important;">横琴区国际科技创新中心7栋607-1室</p>
|
||||
</div>
|
||||
<i class="fa fa-chevron-right text-gray-500 text-xs ml-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 地图面板 - 默认显示 -->
|
||||
<div class="map-panel" id="mapPanel">
|
||||
<div class="map-panel-inner">
|
||||
<div class="map-panel-header">
|
||||
<h4 id="mapTitle">
|
||||
<i class="fa fa-map-marker"></i>
|
||||
<span>广州办公室</span>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="mapContent" class="w-full h-full">
|
||||
<div class="map-loading">
|
||||
<i class="fa fa-spinner"></i>
|
||||
<span>地图加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-10">
|
||||
<div class="inline-block px-6 py-3 bg-primary text-slate-900 rounded-lg hover:bg-primary/90 transition-colors shadow-lg hover:shadow-xl font-medium text-lg cursor-pointer popupbox">
|
||||
联系我们
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// 地图数据
|
||||
var mapData = {
|
||||
'guangzhou': {
|
||||
coords: '23.094218,113.39969',
|
||||
address: '广州市海珠区海珠科技大楼'
|
||||
},
|
||||
'shanghai': {
|
||||
coords: '31.209377,121.597416',
|
||||
address: '上海市浦东新区郭守敬路498号19号楼'
|
||||
},
|
||||
'shenzhen': {
|
||||
coords: '22.547742,113.945943',
|
||||
address: '深圳市南山区科苑路16号东方科技大厦'
|
||||
},
|
||||
'zhuhai': {
|
||||
coords: '22.131082,113.466422',
|
||||
address: '珠海市横琴区国际科技创新中心'
|
||||
}
|
||||
};
|
||||
|
||||
var currentCity = 'guangzhou';
|
||||
|
||||
// 加载地图
|
||||
function loadMap(city, title) {
|
||||
var mapContent = document.getElementById('mapContent');
|
||||
var mapTitle = document.getElementById('mapTitle');
|
||||
|
||||
if (!mapContent) return;
|
||||
|
||||
// 更新标题
|
||||
if (mapTitle) {
|
||||
mapTitle.innerHTML = '<i class="fa fa-map-marker"></i><span>' + title + '</span>';
|
||||
}
|
||||
|
||||
// 如果是同一个城市，不重新加载
|
||||
if (city === currentCity && mapContent.querySelector('iframe')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
mapContent.innerHTML = '<div class="map-loading"><i class="fa fa-spinner"></i><span>地图加载中...</span></div>';
|
||||
|
||||
// 使用腾讯地图
|
||||
var data = mapData[city];
|
||||
if (data) {
|
||||
var encodedAddress = encodeURIComponent(data.address);
|
||||
var mapUrl = 'https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' + data.coords + ';title:隼瞻科技;addr:' + encodedAddress + '&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp';
|
||||
|
||||
// 延迟加载iframe
|
||||
setTimeout(function() {
|
||||
mapContent.innerHTML = '<iframe src="' + mapUrl + '" style="width:100%;height:100%;border:none;position:absolute;top:0;left:0;" allowfullscreen loading="lazy"></iframe>';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
currentCity = city;
|
||||
}
|
||||
|
||||
// 初始化地址卡片点击事件
|
||||
function initAddressCards() {
|
||||
var addressCards = document.querySelectorAll('.address-card');
|
||||
|
||||
addressCards.forEach(function(card) {
|
||||
card.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var city = this.getAttribute('data-city');
|
||||
var title = this.getAttribute('data-title');
|
||||
|
||||
// 如果点击的是当前已选中的城市，不做任何操作
|
||||
if (city === currentCity) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 移除其他卡片的激活状态
|
||||
addressCards.forEach(function(c) {
|
||||
c.classList.remove('active');
|
||||
});
|
||||
|
||||
// 激活当前卡片
|
||||
this.classList.add('active');
|
||||
|
||||
// 加载地图
|
||||
loadMap(city, title);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化默认地图
|
||||
function initDefaultMap() {
|
||||
setTimeout(function() {
|
||||
loadMap('guangzhou', '广州办公室');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function initContact() {
|
||||
// 初始化地址卡片
|
||||
initAddressCards();
|
||||
|
||||
// 初始化默认地图
|
||||
initDefaultMap();
|
||||
}
|
||||
|
||||
// 确保DOM加载完成后执行
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initContact);
|
||||
} else {
|
||||
initContact();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,940 @@
|
||||
<!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: {
|
||||
screens: {
|
||||
'tablet': '1024px',
|
||||
// 保留默认断点但调整顺序
|
||||
'sm': '640px',
|
||||
'md': '768px',
|
||||
'lg': '1280px',
|
||||
'xl': '1536px',
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#3b82f6',
|
||||
secondary: '#0E42D2',
|
||||
accent: '#69b1ff',
|
||||
dark: '#0f172a',
|
||||
light: '#f8fafc',
|
||||
darkBg: '#ffffff',
|
||||
darkerBg: '#f8fafc',
|
||||
darkCard: '#ffffff'
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
.text-shadow {
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.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='%23334155' fill-opacity='0.1'%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");
|
||||
}
|
||||
}
|
||||
|
||||
/* 修复桌面端子菜单显示问题 */
|
||||
.dropdown-submenu:hover > .submenu {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 确保三级菜单有足够的z-index */
|
||||
.submenu-level-3 {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
/* 全宽度mega菜单样式 */
|
||||
.nav-mega-menu {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.mega-dropdown {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
/* mega菜单卡片hover效果 */
|
||||
.mega-menu-item {
|
||||
min-height: 140px;
|
||||
}
|
||||
|
||||
.mega-menu-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 移除移动端按钮的焦点和激活状态的蓝色底框 */
|
||||
#mobile-menu-button,
|
||||
.mobile-dropdown-toggle {
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: transparent !important;
|
||||
-webkit-touch-callout: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
#mobile-menu-button:focus,
|
||||
#mobile-menu-button:active,
|
||||
#mobile-menu-button:hover,
|
||||
.mobile-dropdown-toggle:focus,
|
||||
.mobile-dropdown-toggle:active,
|
||||
.mobile-dropdown-toggle:hover {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* ========== 移动端菜单动效 ========== */
|
||||
|
||||
/* 汉堡按钮动效 */
|
||||
.hamburger {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(1) {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.hamburger.active span:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* 移动端菜单滑入动效 */
|
||||
#mobile-menu {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.3s ease;
|
||||
}
|
||||
|
||||
#mobile-menu.menu-open {
|
||||
max-height: calc(100vh - 80px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 菜单项依次出现动效 */
|
||||
.mobile-menu-item {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#mobile-menu.menu-open .mobile-menu-item {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(6) { transition-delay: 0.3s; }
|
||||
#mobile-menu.menu-open .mobile-menu-item:nth-child(7) { transition-delay: 0.35s; }
|
||||
|
||||
/* 下拉子菜单展开动效 */
|
||||
.mobile-dropdown-menu {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.25s ease,
|
||||
padding 0.3s ease;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mobile-dropdown-menu.submenu-open {
|
||||
max-height: 500px;
|
||||
opacity: 1;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* 菜单项hover效果 */
|
||||
.mobile-menu-link {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.mobile-menu-link:hover,
|
||||
.mobile-menu-link:active {
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
|
||||
border-left-color: #3b82f6;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* 下拉箭头旋转动效 */
|
||||
.mobile-dropdown-toggle i {
|
||||
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.mobile-dropdown-toggle.toggle-active i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* 菜单图标装饰 */
|
||||
.menu-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-menu-link:hover .menu-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* 移动菜单遮罩层 - 只遮挡header以下的内容 */
|
||||
.mobile-menu-overlay {
|
||||
position: fixed;
|
||||
top: 80px; /* 从header下方开始，不覆盖header */
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 确保汉堡按钮始终在最上层 */
|
||||
#mobile-menu-button {
|
||||
position: relative;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay.overlay-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 确保移动端菜单在遮罩层上方 */
|
||||
#mobile-menu {
|
||||
position: relative;
|
||||
z-index: 45;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="font-inter bg-slate-50 text-slate-700 min-h-screen flex flex-col">
|
||||
<!-- 导航栏（页眉） -->
|
||||
<header id="navbar"
|
||||
class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/70 backdrop-blur-sm shadow-md">
|
||||
<!-- 去除max-w限制和特殊padding，使其与页脚对齐并让logo和菜单分开更远 -->
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- 替换为图片logo，您需要将logo图片放在网站目录下并修改下面的路径 -->
|
||||
<a href="https://www.beiyuxing.live/" class="flex items-center">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/10/20251021-101134.png" alt="隼瞻科技"
|
||||
class="h-12 w-36 object-contain">
|
||||
<!-- 如果您只想显示图片，不显示文字，可以删除下面这行 -->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 桌面导航菜单 -->
|
||||
<nav class="hidden tablet:flex items-center space-x-8">
|
||||
<!-- 首页 -->
|
||||
<div class="relative group">
|
||||
<a href="https://www.beiyuxing.live/"
|
||||
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">首页</a>
|
||||
</div>
|
||||
|
||||
<!-- 产品中心 -->
|
||||
<div class="relative group nav-mega-menu">
|
||||
<a
|
||||
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors flex items-center cursor-pointer">
|
||||
产品中心
|
||||
<i
|
||||
class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
||||
</a>
|
||||
<!-- 全宽度下拉菜单 -->
|
||||
<div
|
||||
class="mega-dropdown fixed left-0 right-0 mt-0 bg-white shadow-md/95 backdrop-blur-md shadow-2xl overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-y-95 group-hover:scale-y-100 z-50 border-t border-b border-slate-200">
|
||||
<div class="container mx-auto px-8 py-8 max-w-7xl">
|
||||
<div class="grid grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
<!-- RISC-V处理器IP带三级菜单 -->
|
||||
<div class="relative dropdown-submenu col-span-1">
|
||||
<a
|
||||
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item cursor-pointer border border-slate-200/50 hover:border-gray-600">
|
||||
<div
|
||||
class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||
<i
|
||||
class="fa fa-microchip text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">RISC-V处理器IP</span>
|
||||
<i
|
||||
class="fa fa-chevron-right mt-2 text-xs text-slate-400 group-hover/item:text-slate-900 transition-colors"></i>
|
||||
</a>
|
||||
<!-- 三级菜单 - 三列布局 -->
|
||||
<div
|
||||
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-white shadow-md rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-[420px] border border-slate-200">
|
||||
<div class="grid grid-cols-3 gap-1 p-4">
|
||||
<!-- 通用处理器IP -->
|
||||
<div class="p-2">
|
||||
<div
|
||||
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
||||
通用处理器IP</div>
|
||||
<a href="https://www.beiyuxing.live/wing-m050/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M050</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m130/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m510/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M510</a>
|
||||
<a href="https://www.beiyuxing.live/wing-a500/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-A500</a>
|
||||
|
||||
</div>
|
||||
<!-- 车规处理器IP -->
|
||||
<div class="p-2">
|
||||
<div
|
||||
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
||||
车规处理器IP</div>
|
||||
|
||||
<a href="https://www.beiyuxing.live/wing-m130a/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130A</a>
|
||||
|
||||
</div>
|
||||
<!-- 安全处理器IP -->
|
||||
<div class="p-2">
|
||||
<div
|
||||
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
||||
安全处理器IP</div>
|
||||
<a href="https://www.beiyuxing.live/wing-m050s/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M050S</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m130s/"
|
||||
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130S</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ArchitStudio开发平台 -->
|
||||
<a href="https://www.beiyuxing.live/architstudio-2/"
|
||||
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
||||
<div
|
||||
class="w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-teal-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||
<i
|
||||
class="fa fa-desktop text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">ArchitStudio开发平台</span>
|
||||
</a>
|
||||
<!-- 智翼端侧AI解决方案 -->
|
||||
<a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
||||
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
||||
<div
|
||||
class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||
<i
|
||||
class="fa fa-lightbulb-o text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">智翼端侧AI解决方案</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技术中心 -->
|
||||
<div class="relative group nav-mega-menu">
|
||||
<a
|
||||
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors flex items-center cursor-pointer">
|
||||
技术中心
|
||||
<i
|
||||
class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
||||
</a>
|
||||
<!-- 全宽度下拉菜单 -->
|
||||
<div
|
||||
class="mega-dropdown fixed left-0 right-0 mt-0 bg-white shadow-md/95 backdrop-blur-md shadow-2xl overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-y-95 group-hover:scale-y-100 z-50 border-t border-b border-slate-200">
|
||||
<div class="container mx-auto px-8 py-8 max-w-7xl">
|
||||
<div class="grid grid-cols-3 gap-6 max-w-3xl mx-auto">
|
||||
<!-- IP相关技术带三级菜单 -->
|
||||
<div class="relative dropdown-submenu">
|
||||
<a
|
||||
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item cursor-pointer border border-slate-200/50 hover:border-gray-600">
|
||||
<div
|
||||
class="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-blue-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||
<i
|
||||
class="fa fa-cogs text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">IP相关技术</span>
|
||||
<i
|
||||
class="fa fa-chevron-right mt-2 text-xs text-slate-400 group-hover/item:text-slate-900 transition-colors"></i>
|
||||
</a>
|
||||
<!-- 三级菜单 -->
|
||||
<div
|
||||
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-white shadow-md rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-56 border border-slate-200">
|
||||
<a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
||||
class="flex items-center px-5 py-4 text-sm text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-compress mr-3 text-slate-500"></i>
|
||||
代码压缩技术
|
||||
</a>
|
||||
<a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
||||
class="flex items-center px-5 py-4 text-sm text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-bolt mr-3 text-slate-500"></i>
|
||||
中断实时性技术
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- AI融合技术 -->
|
||||
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/"
|
||||
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
||||
<div
|
||||
class="w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-orange-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||
<i
|
||||
class="fa fa-magic text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
||||
</div>
|
||||
<span
|
||||
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">AI融合技术</span>
|
||||
</a>
|
||||
<!-- 占位 - 保持对称 -->
|
||||
<div class="hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻中心 -->
|
||||
<div class="relative group">
|
||||
<a href="https://www.beiyuxing.live/news/"
|
||||
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">新闻中心</a>
|
||||
</div>
|
||||
|
||||
<!-- 关于我们 -->
|
||||
<div class="relative group">
|
||||
<a href="https://www.beiyuxing.live/about/"
|
||||
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">关于我们</a>
|
||||
</div>
|
||||
|
||||
<!-- 加入按钮 -->
|
||||
<a href="https://www.beiyuxing.live/position/"
|
||||
class="ml-4 px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-white hover:text-dark transition-colors">加入我们</a>
|
||||
</nav>
|
||||
|
||||
<!-- 移动端菜单按钮 -->
|
||||
<div class="tablet:hidden">
|
||||
<button id="mobile-menu-button" type="button"
|
||||
class="text-slate-600 hover:text-slate-900 transition-colors focus:outline-none p-2">
|
||||
<div class="hamburger" id="hamburger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端遮罩层 -->
|
||||
<div id="mobile-menu-overlay" class="mobile-menu-overlay tablet:hidden"></div>
|
||||
|
||||
<!-- 移动端导航菜单 -->
|
||||
<div id="mobile-menu"
|
||||
class="tablet:hidden bg-gradient-to-b from-white to-slate-50 border-t border-slate-200/50">
|
||||
<div class="container mx-auto px-4 py-4 space-y-1">
|
||||
<!-- 首页 -->
|
||||
<a href="https://www.beiyuxing.live/"
|
||||
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
||||
<div class="menu-icon bg-blue-500/20">
|
||||
<i class="fa fa-home text-blue-400"></i>
|
||||
</div>
|
||||
首页
|
||||
</a>
|
||||
|
||||
<!-- 产品中心移动端菜单 -->
|
||||
<div class="mobile-dropdown mobile-menu-item">
|
||||
<div
|
||||
class="mobile-menu-link flex items-center justify-between py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="menu-icon bg-green-500/20">
|
||||
<i class="fa fa-cubes text-green-400"></i>
|
||||
</div>
|
||||
<span>产品中心</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-6 space-y-1 ml-4 border-l border-slate-200/50">
|
||||
<!-- RISC-V处理器IP二级菜单 -->
|
||||
<div class="mobile-dropdown">
|
||||
<div
|
||||
class="flex items-center justify-between py-2.5 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-microchip text-primary mr-3 text-xs"></i>
|
||||
<span>RISC-V处理器IP</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-3 border-l border-slate-200/30">
|
||||
<!-- 通用处理器IP -->
|
||||
<div class="mobile-dropdown">
|
||||
<div
|
||||
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
||||
<span>通用处理器IP</span>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
||||
<a href="https://www.beiyuxing.live/wing-m050/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M050</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m130/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m510/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M510</a>
|
||||
<a href="https://www.beiyuxing.live/wing-a500/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-A500</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 车规处理器IP -->
|
||||
<div class="mobile-dropdown">
|
||||
<div
|
||||
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
||||
<span>车规处理器IP</span>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
||||
|
||||
<a href="https://www.beiyuxing.live/wing-m130a/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130A</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 安全处理器IP -->
|
||||
<div class="mobile-dropdown">
|
||||
<div
|
||||
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
||||
<span>安全处理器IP</span>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
||||
<a href="https://www.beiyuxing.live/wing-m050s/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M050S</a>
|
||||
<a href="https://www.beiyuxing.live/wing-m130s/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130S</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.beiyuxing.live/architstudio-2/"
|
||||
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
||||
<i class="fa fa-desktop text-green-400 mr-3 text-xs"></i>
|
||||
ArchitStudio开发平台
|
||||
</a>
|
||||
<a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
||||
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
||||
<i class="fa fa-lightbulb-o text-orange-400 mr-3 text-xs"></i>
|
||||
智翼端侧AI解决方案
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 技术中心移动端菜单 -->
|
||||
<div class="mobile-dropdown mobile-menu-item">
|
||||
<div
|
||||
class="mobile-menu-link flex items-center justify-between py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="menu-icon bg-purple-500/20">
|
||||
<i class="fa fa-cogs text-purple-400"></i>
|
||||
</div>
|
||||
<span>技术中心</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-6 space-y-1 ml-4 border-l border-slate-200/50">
|
||||
<!-- IP相关技术二级菜单 -->
|
||||
<div class="mobile-dropdown">
|
||||
<div
|
||||
class="flex items-center justify-between py-2.5 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
||||
<div class="flex items-center">
|
||||
<i class="fa fa-puzzle-piece text-indigo-400 mr-3 text-xs"></i>
|
||||
<span>IP相关技术</span>
|
||||
</div>
|
||||
<button type="button"
|
||||
class="mobile-dropdown-toggle w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
||||
aria-label="展开菜单">
|
||||
<i class="fa fa-chevron-down text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-3 border-l border-slate-200/30">
|
||||
<a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">代码压缩技术</a>
|
||||
<a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
||||
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">中断实时性技术</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://www.beiyuxing.live/ai%e8%9e%8d%e5%90%88%e6%8a%80%e6%9c%af/"
|
||||
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
||||
<i class="fa fa-magic text-yellow-400 mr-3 text-xs"></i>
|
||||
AI融合技术
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 新闻中心 -->
|
||||
<a href="https://www.beiyuxing.live/news/"
|
||||
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
||||
<div class="menu-icon bg-orange-500/20">
|
||||
<i class="fa fa-newspaper-o text-orange-400"></i>
|
||||
</div>
|
||||
新闻中心
|
||||
</a>
|
||||
|
||||
<!-- 关于我们 -->
|
||||
<a href="https://www.beiyuxing.live/about/"
|
||||
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
||||
<div class="menu-icon bg-cyan-500/20">
|
||||
<i class="fa fa-info-circle text-cyan-400"></i>
|
||||
</div>
|
||||
关于我们
|
||||
</a>
|
||||
|
||||
<!-- 加入我们 -->
|
||||
<div class="mobile-menu-item pt-4 mt-2 border-t border-slate-200/50">
|
||||
<a href="https://www.beiyuxing.live/position/"
|
||||
class="flex items-center justify-center py-3 px-4 text-sm font-semibold text-slate-900 bg-gradient-to-r from-primary to-blue-600 rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 hover:scale-[1.02]">
|
||||
<i class="fa fa-user-plus mr-2"></i>
|
||||
加入我们
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 联系我们部分已移除 -->
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="bg-slate-50 text-slate-900 py-16 border-t border-slate-300">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||
<!-- 公司信息 -->
|
||||
<div>
|
||||
<div class="flex items-center space-x-2 mb-6">
|
||||
<!-- 可自定义的公司logo图片 -->
|
||||
<div class="w-32 h-10 rounded-lg flex items-center justify-center overflow-hidden">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/10/20251021-101134.png"
|
||||
alt="公司Logo" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-500 mb-6">
|
||||
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具。
|
||||
</p>
|
||||
<div class="flex space-x-4">
|
||||
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-weixin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-weibo"></i>
|
||||
</a>
|
||||
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-6">产品</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="https://www.beiyuxing.live/architstudio-2/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">ArchitStudio开发平台</a></li>
|
||||
<li><a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">智翼端侧AI解决方案</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 服务 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-6">技术</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">AI融合技术</a></li>
|
||||
<li><a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">代码压缩技术</a></li>
|
||||
<li><a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">中断实时性技术</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 关于我们 -->
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-6">关于我们</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="https://www.beiyuxing.live/about/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">公司简介</a></li>
|
||||
<li><a href="https://www.beiyuxing.live/position/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">加入我们</a></li>
|
||||
<li><a href="https://www.beiyuxing.live/news/"
|
||||
class="text-slate-500 hover:text-slate-900 transition-colors">新闻动态</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-8 border-t border-slate-300 flex flex-col md:flex-row justify-between items-center">
|
||||
<p class="text-slate-400 text-sm mb-4 md:mb-0">
|
||||
© <span id="current-year">2023</span> 隼瞻科技. 保留所有权利.
|
||||
</p>
|
||||
<div class="flex space-x-6">
|
||||
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">隐私政策</a>
|
||||
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">使用条款</a>
|
||||
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">法律声明</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button id="back-to-top"
|
||||
class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-darkerBg">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- JavaScript - 改进版 -->
|
||||
<script>
|
||||
// 等待DOM加载完成
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
'use strict';
|
||||
|
||||
// 获取元素
|
||||
const navbar = document.getElementById('navbar');
|
||||
const navbarContainer = navbar ? navbar.querySelector('.container') : null;
|
||||
const backToTop = document.getElementById('back-to-top');
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
||||
const hamburgerIcon = document.getElementById('hamburger-icon');
|
||||
|
||||
// 导航栏滚动效果
|
||||
if (navbar && navbarContainer) {
|
||||
window.addEventListener('scroll', function () {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('py-2', 'shadow-md');
|
||||
navbar.classList.remove('py-4');
|
||||
if (backToTop) {
|
||||
backToTop.classList.remove('opacity-0', 'invisible');
|
||||
backToTop.classList.add('opacity-100', 'visible');
|
||||
}
|
||||
} else {
|
||||
navbar.classList.add('py-4');
|
||||
navbar.classList.remove('py-2', 'shadow-md');
|
||||
if (backToTop) {
|
||||
backToTop.classList.add('opacity-0', 'invisible');
|
||||
backToTop.classList.remove('opacity-100', 'visible');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 切换菜单的函数
|
||||
function toggleMobileMenu() {
|
||||
if (!mobileMenu) return;
|
||||
|
||||
const isOpen = mobileMenu.classList.contains('menu-open');
|
||||
|
||||
if (isOpen) {
|
||||
closeMobileMenu();
|
||||
} else {
|
||||
openMobileMenu();
|
||||
}
|
||||
}
|
||||
|
||||
// 打开菜单
|
||||
function openMobileMenu() {
|
||||
if (!mobileMenu) return;
|
||||
mobileMenu.classList.add('menu-open');
|
||||
if (hamburgerIcon) hamburgerIcon.classList.add('active');
|
||||
if (mobileMenuOverlay) mobileMenuOverlay.classList.add('overlay-visible');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// 关闭菜单
|
||||
function closeMobileMenu() {
|
||||
if (!mobileMenu) return;
|
||||
mobileMenu.classList.remove('menu-open');
|
||||
if (hamburgerIcon) hamburgerIcon.classList.remove('active');
|
||||
if (mobileMenuOverlay) mobileMenuOverlay.classList.remove('overlay-visible');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
// 汉堡按钮点击事件
|
||||
if (mobileMenuButton) {
|
||||
mobileMenuButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleMobileMenu();
|
||||
});
|
||||
}
|
||||
|
||||
// 点击遮罩层关闭菜单
|
||||
if (mobileMenuOverlay) {
|
||||
mobileMenuOverlay.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
closeMobileMenu();
|
||||
});
|
||||
}
|
||||
|
||||
// 点击页面任意位置关闭菜单（点击菜单外区域）
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!mobileMenu || !mobileMenu.classList.contains('menu-open')) return;
|
||||
|
||||
// 检查点击是否在菜单内部或汉堡按钮上
|
||||
const isClickInsideMenu = mobileMenu.contains(e.target);
|
||||
const isClickOnButton = mobileMenuButton && mobileMenuButton.contains(e.target);
|
||||
|
||||
// 如果点击在菜单外且不是汉堡按钮，则关闭菜单
|
||||
if (!isClickInsideMenu && !isClickOnButton) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// 移动端下拉菜单 - 使用事件委托
|
||||
if (mobileMenu) {
|
||||
mobileMenu.addEventListener('click', function (e) {
|
||||
// 检查是否点击了链接（直接跳转的菜单项）
|
||||
const link = e.target.closest('a');
|
||||
if (link && link.getAttribute('href') && link.getAttribute('href') !== '#') {
|
||||
// 如果是有效链接，允许默认行为
|
||||
return;
|
||||
}
|
||||
|
||||
// 查找最近的包含下拉菜单的容器
|
||||
let clickTarget = e.target.closest('.mobile-dropdown');
|
||||
if (!clickTarget) return;
|
||||
|
||||
// 确保不是点击子菜单内的内容
|
||||
const clickedSubMenu = e.target.closest('.mobile-dropdown-menu');
|
||||
if (clickedSubMenu && clickedSubMenu.parentElement === clickTarget) {
|
||||
// 如果点击的是子菜单内容，不处理
|
||||
return;
|
||||
}
|
||||
|
||||
// 查找直接的下拉菜单和切换按钮
|
||||
const menu = clickTarget.querySelector(':scope > .mobile-dropdown-menu');
|
||||
const toggleBtn = clickTarget.querySelector(':scope > .mobile-menu-link > .mobile-dropdown-toggle, :scope > div > .mobile-dropdown-toggle');
|
||||
|
||||
if (menu) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
menu.classList.toggle('submenu-open');
|
||||
if (toggleBtn) {
|
||||
toggleBtn.classList.toggle('toggle-active');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 返回顶部按钮
|
||||
if (backToTop) {
|
||||
backToTop.addEventListener('click', function () {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 设置当前年份
|
||||
const currentYear = document.getElementById('current-year');
|
||||
if (currentYear) {
|
||||
currentYear.textContent = new Date().getFullYear();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+1479
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,364 @@
|
||||
<!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>
|
||||
+392
@@ -0,0 +1,392 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>处理器 IP 货架集群 - 隼瞻科技</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',
|
||||
darkBg: '#f8fafc',
|
||||
darkerBg: '#f1f5f9',
|
||||
darkCard: '#ffffff',
|
||||
},
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.glass-panel {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
|
||||
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;
|
||||
}
|
||||
|
||||
/* 移除全局 a hover color override，改为让 tailwind 控制 */
|
||||
|
||||
/* 网格背景 */
|
||||
.grid-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 产品卡片特效 - 浅色玻璃态 */
|
||||
.model-card {
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.05);
|
||||
}
|
||||
|
||||
.model-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.model-card:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.model-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15), 0 0 20px rgba(255, 255, 255, 0.8);
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.9));
|
||||
}
|
||||
|
||||
.model-card:hover .icon-wrapper {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 渐变文本 */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
position: relative;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.category-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10%;
|
||||
height: 80%;
|
||||
width: 4px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased bg-slate-50 text-slate-800 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 class="grid-bg"></div>
|
||||
|
||||
<div id="sj-product-page" class="relative z-10 w-full">
|
||||
<!-- 顶部导航占位 -->
|
||||
<header class="border-b border-white/80 glass-panel-light sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<a href="index_new.html" class="flex items-center space-x-2 text-slate-600 hover:text-primary transition-colors font-bold">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
<span>返回首页</span>
|
||||
</a>
|
||||
<div class="text-slate-700 font-extrabold flex items-center border border-white px-4 py-1 rounded-full bg-white/50 shadow-sm">
|
||||
<i class="fa fa-cubes text-primary mr-2"></i>处理器 IP 货架集群
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 页面标题区 -->
|
||||
<section class="py-16 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-64 bg-primary/10 blur-[120px] rounded-full pointer-events-none"></div>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-slate-800 mb-6 drop-shadow-sm">
|
||||
完整的 <span class="gradient-text drop-shadow-sm">处理器 IP</span> 货架集群
|
||||
</h1>
|
||||
<p class="text-lg text-slate-600 max-w-3xl mx-auto font-medium leading-relaxed">
|
||||
点击具体型号，深入了解从超低功耗嵌入式到全场景数字算力的详细架构与技术规格。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主体货架展示区 -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-20 pb-24">
|
||||
|
||||
<!-- ================= CPU IP 板块 ================= -->
|
||||
<section class="glass-panel p-8 md:p-10 rounded-3xl border-2 border-white shadow-lg relative overflow-hidden">
|
||||
<div class="absolute -top-32 -right-32 w-64 h-64 bg-emerald-100 rounded-full blur-[80px] -z-10"></div>
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-10 pb-4 border-b-2 border-slate-100 gap-4">
|
||||
<h2 class="text-3xl font-extrabold text-slate-800 category-header border-primary">CPU IP (RISC-V 架构)</h2>
|
||||
<span class="px-5 py-2 rounded-xl bg-blue-50 text-blue-600 text-sm font-bold border border-blue-200 shadow-sm">Wing-M & Wing-A 系列</span>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-2 gap-12">
|
||||
<!-- Wing-M 系列 (量产型/专用小核/中核) -->
|
||||
<div class="bg-white/40 p-6 rounded-2xl border border-white">
|
||||
<h3 class="text-xl font-extrabold text-emerald-600 mb-6 flex items-center bg-emerald-50 w-max px-4 py-2 rounded-xl border border-emerald-100 shadow-sm">
|
||||
<i class="fa fa-microchip mr-3"></i> Wing-M 系列 (嵌入式/工控/安全)
|
||||
</h3>
|
||||
<div class="grid sm:grid-cols-2 gap-5">
|
||||
<a href="Wing-M050.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-emerald-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-M050</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center border border-emerald-200">
|
||||
<i class="fa fa-battery-empty text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">量产型小核，完美替代 Cortex-M0/M0+，极小面积与超低功耗设计。</p>
|
||||
<div class="text-emerald-600 text-sm font-bold flex items-center bg-emerald-50 px-3 py-1.5 rounded-lg w-max border border-emerald-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<a href="Wing-M050s安全核.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-green-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-M050s</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-green-100 text-green-600 flex items-center justify-center border border-green-200">
|
||||
<i class="fa fa-shield text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">专用加密安全小核，面向汽车电子及高安全特性需求。</p>
|
||||
<div class="text-green-600 text-sm font-bold flex items-center bg-green-50 px-3 py-1.5 rounded-lg w-max border border-green-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<a href="Wing-M130.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-emerald-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-M130</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center border border-emerald-200">
|
||||
<i class="fa fa-tachometer text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">通用中核，高性能嵌入式处理器，服务于通信、工控及存储等领域。</p>
|
||||
<div class="text-emerald-600 text-sm font-bold flex items-center bg-emerald-50 px-3 py-1.5 rounded-lg w-max border border-emerald-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<a href="Wing-M130A.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-teal-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-M130A</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-teal-100 text-teal-600 flex items-center justify-center border border-teal-200">
|
||||
<i class="fa fa-music text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">在 M130 基础上增强 DSP 计算能力，适配轻量音频与信号处理。</p>
|
||||
<div class="text-teal-600 text-sm font-bold flex items-center bg-teal-50 px-3 py-1.5 rounded-lg w-max border border-teal-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wing-A 系列 (通用大核) -->
|
||||
<div class="bg-white/40 p-6 rounded-2xl border border-white">
|
||||
<h3 class="text-xl font-extrabold text-blue-600 mb-6 flex items-center bg-blue-50 w-max px-4 py-2 rounded-xl border border-blue-100 shadow-sm">
|
||||
<i class="fa fa-rocket mr-3"></i> Wing-A 系列 (通用大核/应用级)
|
||||
</h3>
|
||||
<div class="grid sm:grid-cols-2 gap-5 h-[calc(100%-4rem)]">
|
||||
<a href="Wing-A500.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-blue-300 h-full">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-A500</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center border border-blue-200">
|
||||
<i class="fa fa-laptop text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">支持 RVA23 规范的双发射9级流水线大核，覆盖 AP 与端侧 AI。</p>
|
||||
<div class="text-blue-600 text-sm font-bold flex items-center mt-auto bg-blue-50 px-3 py-1.5 rounded-lg w-max border border-blue-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<a href="Wing-A700.html" class="model-card p-6 rounded-xl group border-2 border-transparent hover:border-indigo-300 h-full">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-A700</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center border border-indigo-200">
|
||||
<i class="fa fa-server text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">更高性能的 64 位多核强劲算力引擎，专为高性能服务器及大算力平台设计。</p>
|
||||
<div class="text-indigo-600 text-sm font-bold flex items-center mt-auto bg-indigo-50 px-3 py-1.5 rounded-lg w-max border border-indigo-100">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= DSP IP 板块 ================= -->
|
||||
<section class="glass-panel p-8 md:p-10 rounded-3xl border-2 border-white shadow-lg relative overflow-hidden">
|
||||
<div class="absolute top-1/2 left-0 w-64 h-64 bg-cyan-100 rounded-full blur-[80px] -translate-y-1/2 -z-10"></div>
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-10 pb-4 border-b-2 border-slate-100 gap-4">
|
||||
<h2 class="text-3xl font-extrabold text-slate-800 category-header !border-cyan-500">DSP IP (信号与矢量处理)</h2>
|
||||
<span class="px-5 py-2 rounded-xl bg-cyan-50 text-cyan-600 text-sm font-bold border border-cyan-200 shadow-sm">Wing-D 系列</span>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<!-- DSP产品卡片 -->
|
||||
<a href="#" class="model-card p-6 rounded-2xl group border-2 border-transparent hover:border-cyan-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-D200</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-cyan-100 text-cyan-600 flex items-center justify-center border border-cyan-200">
|
||||
<i class="fa fa-wifi text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">专用矢量处理器，聚焦 5G 通信核心场景与高频信号处理。</p>
|
||||
<div class="text-cyan-600 text-sm font-bold flex items-center bg-cyan-50 px-3 py-1.5 rounded-lg w-max border border-cyan-100">探索设备 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="model-card p-6 rounded-2xl group border-2 border-transparent hover:border-cyan-400">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h4 class="text-lg font-extrabold text-slate-800">Wing-D400-VL</h4>
|
||||
<div class="icon-wrapper w-10 h-10 rounded-xl bg-cyan-100 text-cyan-600 flex items-center justify-center border border-cyan-200">
|
||||
<i class="fa fa-headphones text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-6 flex-grow font-medium leading-relaxed">强化版矢量处理器，同时完美适配轻量级 AI 运算与 HIFI 音频处理。</p>
|
||||
<div class="text-cyan-600 text-sm font-bold flex items-center bg-cyan-50 px-3 py-1.5 rounded-lg w-max border border-cyan-100">探索设备 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||
</a>
|
||||
|
||||
<!-- 场景介绍占位卡片 -->
|
||||
<div class="lg:col-span-2 p-8 rounded-2xl bg-gradient-to-br from-cyan-50 to-white/60 border border-cyan-200 flex flex-col justify-center shadow-inner relative overflow-hidden">
|
||||
<div class="absolute -right-10 -bottom-10 opacity-10 pointer-events-none">
|
||||
<i class="fa fa-crosshairs text-[150px] text-cyan-500"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-extrabold text-cyan-800 mb-3 flex items-center"><i class="fa fa-crosshairs text-cyan-500 mr-2"></i> 精准高效的专用架构</h4>
|
||||
<p class="text-slate-600 font-medium leading-relaxed relative z-10">
|
||||
基于独特的指令集与数据路径融合设计，Wing-D 系列在 5G 基带运算、复杂音频降噪以及特定轻量级网络推理上，相比通用核心能大幅降低功耗并提高吞吐量，为通信与声学领域提供极致的算力支撑。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ================= NPU IP 板块 ================= -->
|
||||
<section class="glass-panel p-8 md:p-10 rounded-3xl border-2 border-white shadow-lg relative overflow-hidden">
|
||||
<div class="absolute bottom-0 right-0 w-80 h-80 bg-purple-100 rounded-full blur-[100px] -z-10"></div>
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-10 pb-4 border-b-2 border-slate-100 gap-4">
|
||||
<h2 class="text-3xl font-extrabold text-slate-800 category-header !border-purple-500">NPU IP (神经网络处理器)</h2>
|
||||
<span class="px-5 py-2 rounded-xl bg-purple-50 text-purple-600 text-sm font-bold border border-purple-200 shadow-sm">Wing-N / P / M 系列</span>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-3 gap-8">
|
||||
<!-- 端侧 -->
|
||||
<a href="#" class="model-card p-8 rounded-2xl group border-2 border-transparent hover:border-purple-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<span class="text-xs font-black text-purple-500 uppercase tracking-wider mb-2 block bg-purple-50 w-max px-2 py-0.5 rounded border border-purple-100 shadow-sm">端侧 AI</span>
|
||||
<h4 class="text-2xl font-extrabold text-slate-800 drop-shadow-sm">0 - 4T <span class="text-lg text-slate-500 font-bold ml-1">算力</span></h4>
|
||||
</div>
|
||||
<div class="icon-wrapper w-12 h-12 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center text-2xl border border-purple-200 shadow-sm">
|
||||
<i class="fa fa-cogs"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-8 flex-grow font-medium leading-relaxed">
|
||||
覆盖各类 IoT 设备、智能家居、可穿戴设备。极低待机功耗，支持实时唤醒与本地小模型推理。
|
||||
</p>
|
||||
<div class="pt-5 border-t-2 border-slate-100/50 text-purple-600 text-sm font-extrabold flex items-center">
|
||||
Wing-M 系列 <span class="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center shadow-sm border border-purple-100 ml-auto group-hover:bg-purple-100 transition-colors"><i class="fa fa-angle-right"></i></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 边缘侧 -->
|
||||
<a href="#" class="model-card p-8 rounded-2xl group border-2 border-transparent hover:border-pink-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<span class="text-xs font-black text-pink-500 uppercase tracking-wider mb-2 block bg-pink-50 w-max px-2 py-0.5 rounded border border-pink-100 shadow-sm">边缘 AI</span>
|
||||
<h4 class="text-2xl font-extrabold text-slate-800 drop-shadow-sm">4 - 64T <span class="text-lg text-slate-500 font-bold ml-1">算力</span></h4>
|
||||
</div>
|
||||
<div class="icon-wrapper w-12 h-12 rounded-xl bg-pink-100 text-pink-600 flex items-center justify-center text-2xl border border-pink-200 shadow-sm">
|
||||
<i class="fa fa-car"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-8 flex-grow font-medium leading-relaxed">
|
||||
适用于智能汽车、安防监控前端、服务器边缘端节点。提供极高能效比的大规模张量加速。
|
||||
</p>
|
||||
<div class="pt-5 border-t-2 border-slate-100/50 text-pink-600 text-sm font-extrabold flex items-center">
|
||||
Wing-P 系列 <span class="w-8 h-8 rounded-lg bg-pink-50 flex items-center justify-center shadow-sm border border-pink-100 ml-auto group-hover:bg-pink-100 transition-colors"><i class="fa fa-angle-right"></i></span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 云端 -->
|
||||
<a href="#" class="model-card p-8 rounded-2xl group border-2 border-transparent hover:border-rose-300">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div>
|
||||
<span class="text-xs font-black text-rose-500 uppercase tracking-wider mb-2 block bg-rose-50 w-max px-2 py-0.5 rounded border border-rose-100 shadow-sm">云端 AI</span>
|
||||
<h4 class="text-2xl font-extrabold text-slate-800 drop-shadow-sm">> 200T <span class="text-lg text-slate-500 font-bold ml-1">算力</span></h4>
|
||||
</div>
|
||||
<div class="icon-wrapper w-12 h-12 rounded-xl bg-rose-100 text-rose-600 flex items-center justify-center text-2xl border border-rose-200 shadow-sm">
|
||||
<i class="fa fa-cloud"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 mb-8 flex-grow font-medium leading-relaxed">
|
||||
针对大数据平台、服务器集群与大模型训练/推理定制，具备高度可扩展的多芯多卡级联能力。
|
||||
</p>
|
||||
<div class="pt-5 border-t-2 border-slate-100/50 text-rose-600 text-sm font-extrabold flex items-center">
|
||||
Wing-N 系列 <span class="w-8 h-8 rounded-lg bg-rose-50 flex items-center justify-center shadow-sm border border-rose-100 ml-auto group-hover:bg-rose-100 transition-colors"><i class="fa fa-angle-right"></i></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+276
@@ -0,0 +1,276 @@
|
||||
<!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>
|
||||
+409
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>产品详情 - 隼瞻科技</title>
|
||||
|
||||
<!-- Tailwind -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Font Awesome & Font -->
|
||||
<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">
|
||||
|
||||
<!-- Main styles -->
|
||||
<style type="text/css">
|
||||
#sj-product-page {
|
||||
--primary: #3b82f6;
|
||||
--secondary: #2563eb;
|
||||
--accent: #60a5fa;
|
||||
--dark: #f8fafc;
|
||||
--darker: #f1f5f9;
|
||||
--light: #0f172a;
|
||||
--bg-transparent: #f8fafc;
|
||||
--bg-slate-50: #ffffff;
|
||||
font-family: "Inter", sans-serif;
|
||||
background-color: transparent !important;
|
||||
color: #1e293b !important;
|
||||
}
|
||||
|
||||
/* Glass Panel Light */
|
||||
.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.9), rgba(255, 255, 255, 0.6));
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #8b5cf6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#sj-product-page .bg-bg-slate-50 { background-color: var(--bg-slate-50) !important; }
|
||||
#sj-product-page .bg-bg-transparent { background-color: var(--bg-transparent) !important; }
|
||||
#sj-product-page .bg-slate-50 { background-color: var(--darker) !important; }
|
||||
#sj-product-page .bg-transparent { background-color: var(--dark) !important; }
|
||||
|
||||
#sj-product-page .bg-primary { background-color: var(--primary) !important; }
|
||||
#sj-product-page .text-primary { color: var(--primary) !important; }
|
||||
#sj-product-page .text-secondary { color: var(--secondary) !important; }
|
||||
#sj-product-page .text-slate-800 { color: #1e293b !important; }
|
||||
|
||||
#sj-product-page .bg-primary-20 { background-color: rgba(59,130,246,0.15) !important; }
|
||||
#sj-product-page .bg-primary-10 { background-color: rgba(59,130,246,0.08) !important; }
|
||||
|
||||
#sj-product-page .text-gray-100 { color: #1e293b !important; }
|
||||
#sj-product-page .text-slate-600 { color: #475569 !important; }
|
||||
#sj-product-page .text-slate-500 { color: #64748b !important; }
|
||||
|
||||
#sj-product-page .rounded-xl { border-radius: 0.75rem !important; }
|
||||
#sj-product-page .rounded-2xl { border-radius: 1rem !important; }
|
||||
#sj-product-page .shadow-md { box-shadow: 0 4px 12px rgba(59,130,246,0.08) !important; }
|
||||
#sj-product-page .shadow-lg { box-shadow: 0 8px 24px rgba(59,130,246,0.12) !important; }
|
||||
|
||||
#sj-product-page .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
|
||||
@media (min-width: 768px) { #sj-product-page .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
|
||||
@media (min-width: 1024px) { #sj-product-page .container { padding-left: 2rem; padding-right: 2rem; } }
|
||||
|
||||
#sj-product-page .grid { display: grid; gap: 1.5rem; }
|
||||
@media (min-width: 768px) {
|
||||
#sj-product-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
#sj-product-page .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
#sj-product-page .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
|
||||
#sj-product-page .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
#sj-product-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
||||
#sj-product-page .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||
}
|
||||
|
||||
#sj-product-page .text-shadow { text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
|
||||
#sj-product-page .product-feature-card { transition: all 0.3s ease; }
|
||||
#sj-product-page .product-feature-card:hover { transform: translateY(-5px); }
|
||||
#sj-product-page .section-active { color: var(--secondary) !important; border-bottom: 2px solid var(--secondary) !important; }
|
||||
|
||||
#sj-product-page .animate-fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
#sj-product-page .animate-fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#sj-product-page .hover-float { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
#sj-product-page .hover-float:hover { transform: translateY(-5px); }
|
||||
|
||||
#sj-product-page .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;
|
||||
}
|
||||
|
||||
@keyframes gradientFlow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
#sj-product-page .gradient-animate {
|
||||
background-size: 200% 200% !important;
|
||||
animation: gradientFlow 15s ease infinite !important;
|
||||
}
|
||||
|
||||
@keyframes pulseSlow {
|
||||
0%,100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
#sj-product-page .animate-pulse-slow { animation: pulseSlow 3s ease-in-out infinite !important; }
|
||||
|
||||
#sj-product-page a { color: var(--primary) !important; text-decoration: none !important; }
|
||||
#sj-product-page a:hover { color: var(--secondary) !important; }
|
||||
|
||||
#sj-product-page img { display: block; max-width: 100%; height: auto; }
|
||||
|
||||
#sj-product-page h1, #sj-product-page h2, #sj-product-page h3, #sj-product-page h4 {
|
||||
color: #1e293b !important;
|
||||
}
|
||||
|
||||
#sj-product-page .border { border-color: rgba(59,130,246,0.1) !important; }
|
||||
#sj-product-page .border-slate-200 { border-color: rgba(59,130,246,0.15) !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="min-h-screen relative z-10 bg-transparent">
|
||||
|
||||
<!-- 产品页面头部 -->
|
||||
<section class="pt-24 md:pt-32 pb-16 md:pb-24 overflow-hidden relative">
|
||||
<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 gradient-text">
|
||||
FPGA开发板
|
||||
</h1>
|
||||
<div class="bg-blue-50 border border-blue-100 inline-block px-6 pt-4 rounded-full mb-6 animate-fade-in shadow-sm">
|
||||
<h2 class="text-xl font-semibold text-primary">Wing-FPGA-XCKU5P-EVB开发板</h2>
|
||||
</div>
|
||||
|
||||
<!-- 产品图片 - 可替换为实际产品图片 -->
|
||||
<div class="mb-8 max-w-2xl mx-auto animate-fade-in">
|
||||
<div class="glass-panel p-4 rounded-xl">
|
||||
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/11/whiteboard_exported_image-21-1.png" alt="Wing-M130处理器IP" class="w-full h-auto rounded-lg max-h-64 object-contain mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-lg md:text-xl text-slate-600 mb-8 max-w-2xl mx-auto" style="line-height:1.6;">
|
||||
Wing-FPGA-XCKU5P-EVB是基于Xilinx Ultrascale+ FPGA家族的FPGA开发板，适用于隼瞻各系列内核的评估。
|
||||
</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="applications" class="section-content py-16 bg-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-M130处理器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-blue-50 text-primary border border-blue-100 px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2 shadow-sm">
|
||||
<i class="fa fa-industry"></i> 工业控制
|
||||
</span>
|
||||
<span class="bg-blue-50 text-primary border border-blue-100 px-6 py-3 rounded-full text-lg font-medium animate-fade-in flex items-center gap-2 shadow-sm" style="transition-delay: 0.1s">
|
||||
<i class="fa fa-connectdevelop"></i> 物联网
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 详细应用场景描述 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
|
||||
<div class="glass-panel p-6 rounded-xl hover:bg-blue-50/30 transition-colors animate-fade-in">
|
||||
<div class="flex items-start mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100/50 rounded-full flex items-center justify-center mr-4 shadow-inner">
|
||||
<i class="fa fa-tachometer text-primary text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800">性能展示</h4>
|
||||
<p class="text-slate-600">
|
||||
通过多种基准测试，评估wing-A内核在不同工作负载下的计算性能和吞吐量。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel p-6 rounded-xl hover:bg-blue-50/30 transition-colors animate-fade-in" style="transition-delay: 0.1s">
|
||||
<div class="flex items-start mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100/50 rounded-full flex items-center justify-center mr-4 shadow-inner">
|
||||
<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">
|
||||
评估FPGA逻辑单元、存储器和DSP资源的使用情况，优化内核设计。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. 技术亮点 -->
|
||||
<section id="features" class="section-content py-16 bg-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 p-6 rounded-xl hover:bg-blue-50/30 transition-colors animate-fade-in">
|
||||
<div class="flex items-start">
|
||||
<div class="mt-1 bg-blue-100/50 p-2 rounded-lg shadow-inner">
|
||||
<i class="fa fa-check text-primary"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800 mt-3">丰富的片内资源，可支持wing-A系列内核运行Linux</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel p-6 rounded-xl hover:bg-blue-50/30 transition-colors animate-fade-in" style="transition-delay: 0.1s">
|
||||
<div class="flex items-start">
|
||||
<div class="mt-1 bg-blue-100/50 p-2 rounded-lg shadow-inner">
|
||||
<i class="fa fa-check text-primary"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800 mt-3">丰富的外设资源，可适应各种评估场景</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-panel p-6 rounded-xl hover:bg-blue-50/30 transition-colors animate-fade-in" style="transition-delay: 0.2s">
|
||||
<div class="flex items-start">
|
||||
<div class="mt-1 bg-blue-100/50 p-2 rounded-lg shadow-inner">
|
||||
<i class="fa fa-check text-primary"></i>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<h4 class="text-xl font-bold mb-2 text-slate-800 mt-3">紧凑，小巧的外观</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. 产品参数 -->
|
||||
<section id="specifications" class="section-content py-16 bg-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-light rounded-xl p-8 animate-fade-in">
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">FPGA</span>
|
||||
<span class="font-medium text-slate-800">Xilinx XCKU5P</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">UART</span>
|
||||
<span class="font-medium text-slate-800">Yes</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">SD/MMC</span>
|
||||
<span class="font-medium text-slate-800">Yes</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">Key</span>
|
||||
<span class="font-medium text-slate-800">4</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">LED</span>
|
||||
<span class="font-medium text-slate-800">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">Switch</span>
|
||||
<span class="font-medium text-slate-800">4</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">HDMI</span>
|
||||
<span class="font-medium text-slate-800">Yes, HDMI 1.4</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">Ethernet</span>
|
||||
<span class="font-medium text-slate-800">Yes, 1Gb ethernet</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">USB</span>
|
||||
<span class="font-medium text-slate-800">Yes, Host or Slave</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">DDR</span>
|
||||
<span class="font-medium text-slate-800">Yes, DDR4 2GB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">HyperRAM</span>
|
||||
<span class="font-medium text-slate-800">Yes, 32MB</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">QSPI Flash</span>
|
||||
<span class="font-medium text-slate-800">Yes</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">LCD</span>
|
||||
<span class="font-medium text-slate-800">Yes, 800x480 with touch</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-3 border-b border-blue-100">
|
||||
<span class="text-slate-500">Audio</span>
|
||||
<span class="font-medium text-slate-800">Yes, I2S codec</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-slate-500">PMOD</span>
|
||||
<span class="font-medium text-slate-800">Yes, 2x 3.3V, 1x 1.8V</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 bg-transparent relative overflow-hidden">
|
||||
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mx-auto text-center glass-panel p-10 rounded-2xl relative z-10">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-slate-800 gradient-text">开启FPGA创新之旅</h2>
|
||||
<p class="text-xl text-slate-600 mb-10">
|
||||
无论您是进行原型验证、产品开发还是寻求高性能计算解决方案，FPGA都能为您的项目提供灵活、高效的硬件支持。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 咨询按钮 -->
|
||||
<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-lg shadow-blue-500/30 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>
|
||||
|
||||
<script>
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
checkScroll();
|
||||
window.addEventListener('scroll', checkScroll, { passive: true });
|
||||
window.addEventListener('resize', checkScroll);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,522 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>职位列表</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0f172a;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.job-item {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.job-item:hover {
|
||||
background-color: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.job-left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.job-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgb(215, 212, 219);
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.job-title:hover {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.job-type {
|
||||
background-color: #374151;
|
||||
color: #9ca3af;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.job-description {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.job-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.job-category {
|
||||
background-color: #e0f2fe; color: #1e40af;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.job-status {
|
||||
color: #10b981;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.special-notice {
|
||||
background-color: #e0f2fe; color: #1e40af;
|
||||
color: white;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 搜索和筛选区域 -->
|
||||
<div class="search-filter-section"
|
||||
style="margin-bottom: 24px; padding: 20px; background-color: #ffffff; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
||||
<h2 style="margin-bottom: 16px; font-size: 20px; font-weight: 600;">职位搜索与筛选</h2>
|
||||
|
||||
<!-- 搜索框 -->
|
||||
<div style="margin-bottom: 16px;">
|
||||
<input type="text" id="keyword-search" placeholder="输入关键字搜索职位..." style="
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
">
|
||||
</div>
|
||||
|
||||
<!-- 筛选框 -->
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
|
||||
<div>
|
||||
<label style="display: block; margin-bottom: 6px; font-size: 14px; color: #64748b;">职位名称</label>
|
||||
<select id="job-title-filter" style="
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
">
|
||||
<option value="all">全部职位</option>
|
||||
<option value="CPU IP系统开发工程师">CPU IP系统开发工程师</option>
|
||||
<option value="CPU IP设计工程师">CPU IP设计工程师</option>
|
||||
<option value="CPU IP 验证工程师">CPU IP 验证工程师</option>
|
||||
<option value="编译器开发工程师">编译器开发工程师</option>
|
||||
<option value="仿真开发工程师">仿真开发工程师</option>
|
||||
<option value="SDK开发工程师">SDK开发工程师</option>
|
||||
<option value="数字ic设计工程师">数字ic设计工程师</option>
|
||||
<option value="技术应用工程师(AE)">技术应用工程师(AE)</option>
|
||||
<option value="软件IDE开发工程师">软件IDE开发工程师</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; margin-bottom: 6px; font-size: 14px; color: #64748b;">职位类型</label>
|
||||
<select id="job-type-filter" style="
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
">
|
||||
<option value="all">全部类型</option>
|
||||
<option value="研发">研发</option>
|
||||
<option value="商务">商务</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; margin-bottom: 6px; font-size: 14px; color: #64748b;">工作地点</label>
|
||||
<select id="job-category-filter" style="
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
">
|
||||
<option value="all">全部地点</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="珠海">珠海</option>
|
||||
<option value="深圳">深圳</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style="display: block; margin-bottom: 6px; font-size: 14px; color: #64748b;">职位状态</label>
|
||||
<select id="job-status-filter" style="
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background-color: #f1f5f9;
|
||||
border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
border-radius: 6px;
|
||||
color: #1e293b;
|
||||
font-size: 14px;
|
||||
">
|
||||
<option value="all">全部状态</option>
|
||||
<option value="26应届/需实习">26应届/需实习</option>
|
||||
<option value="全职">全职</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title"><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1142/">CPU
|
||||
IP系统开发工程师</a></div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1.负责公司处理器产品定义与规划<br>
|
||||
2.负责处理器（或处理器模块级）架构规格定义<br>
|
||||
3.负责微架构的建模与分析，瓶颈识别与方案提出<br>
|
||||
4.负责微架构原型系统分析搭建<br>
|
||||
5.负责处理器前沿技术调研及落地
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">CPU IP设计工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1.根据需求，搭建基于RISC-V CPU的硬件解决方案<br>
|
||||
2.负责SOC集成/总线/CPU等方向的数字电路设计和项目交付<br>
|
||||
3.负责制订模块规格书，编写RTL代码，提供设计报告和验证支持<br>
|
||||
4.负责模块综合及时序分析<br>
|
||||
5.负责芯片模块功能调试和应用支持
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">CPU IP 验证工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责一个或者多个CPU IP相关模块的验证工作，实现CPU IP的高质量交付：<br>
|
||||
1.制定测试计划，负责模块的测试方案文档编写及覆盖率统计<br>
|
||||
2.开发UVM/Formal环境和测试例，开发测试脚本，对所负责模块进行模块验证（Unit Test）
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">编译器开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责自研处理器工具链开发，基于llvm&gcc框架:打造高效率高质量工具链：<br>
|
||||
方向一：编程语言与编译框架设计<br>
|
||||
方向二：编译器工具链<br>
|
||||
方向三：二进制翻译
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">仿真开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责IA，CA等不同类型仿真器开发，协同架构优化，全面提升产品竞争力
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">SDK开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责解决方案软件开发，软硬件协同支撑客户商业成功：<br>
|
||||
1.负责基于公司RISCV处理器SDK及操作系统开发及移植<br>
|
||||
2.负责公司FPGA平台业务开发及移植<br>
|
||||
3.为不同客户，开发定制化业务程序<br>
|
||||
4.交付过程中为客户提供技术支持<br>
|
||||
5.参与开源社区，与全球 RISC-V 开发者协作
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">数字ic设计工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1. 负责SOC集成/总线/DDR/接口/电源/低功耗/图像视频/通信/安全/CPU等方向的数字电路设计和项目交付<br>
|
||||
2. 负责制订模块规格书，编写RTL代码，提供设计报告和验证支持<br>
|
||||
3. 负责模块综合及时序分析<br>
|
||||
4. 负责芯片模块功能调试和应用支持
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">珠海</div>
|
||||
<div class="job-status">26应届/需实习</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">技术应用工程师(AE)</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1.为客户提供基于RISC-V CPU的高质量应用技术支持<br>
|
||||
2.根据研发提供的产品资料，撰写培训资料(PPT)，用于演讲介绍<br>
|
||||
3.充分了解客户项目架构以及技术指标，解构PPA需求，有效地提出RISC-V的解决方案<br>
|
||||
4.与客户有效沟通，能快速及时地向研发团队传递客户需求...
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">深圳</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">CPU IP设计工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1.根据需求，搭建基于RISC-V CPU的硬件解决方案<br>
|
||||
2.负责SOC集成/总线/CPU等方向的数字电路设计和项目交付<br>
|
||||
3.负责制订模块规格书，编写RTL代码，提供设计报告和验证支持<br>
|
||||
4.负责模块综合及时序分析<br>
|
||||
5.负责芯片模块功能调试和应用支持
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">CPU IP 验证工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责一个或者多个CPU IP相关模块的验证工作，实现CPU IP的高质量交付：<br>
|
||||
1.制定测试计划，负责模块的测试方案文档编写及覆盖率统计<br>
|
||||
2.开发UVM/Formal环境和测试例，开发测试脚本，对所负责模块进行模块验证（Unit Test）
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">编译器开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责自研处理器工具链开发，基于llvm&gcc框架:打造高效率高质量工具链：<br>
|
||||
方向一：编程语言与编译框架设计<br>
|
||||
方向二：编译器工具链<br>
|
||||
方向三：二进制翻译
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">SDK开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
负责解决方案软件开发，软硬件协同支撑客户商业成功：<br>
|
||||
1.负责基于公司RISCV处理器SDK及操作系统开发及移植<br>
|
||||
2.负责公司FPGA平台业务开发及移植<br>
|
||||
3.为不同客户，开发定制化业务程序<br>
|
||||
4.交付过程中为客户提供技术支持<br>
|
||||
5.参与开源社区，与全球 RISC-V 开发者协作
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">软件IDE开发工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1. 负责公司 IDE 软件开发<br>
|
||||
2. 与公司其他团队对接，支持 gcc/clang 等工具链和 debug、profiler 工具集成<br>
|
||||
3. 持续优化 IDE 性能、兼容性及界面布局，改善 IDE 用户使用体验
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">上海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="job-item">
|
||||
<div class="job-left">
|
||||
<div class="job-title">数字ic设计工程师</div>
|
||||
<div class="job-type">研发</div>
|
||||
<div class="job-description">
|
||||
1. 负责SOC集成/总线/DDR/接口/电源/低功耗/图像视频/通信/安全/CPU等方向的数字电路设计和项目交付<br>
|
||||
2. 负责制订模块规格书，编写RTL代码，提供设计报告和验证支持<br>
|
||||
3. 负责模块综合及时序分析<br>
|
||||
4. 负责芯片模块功能调试和应用支持
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-right">
|
||||
<div class="job-category">珠海</div>
|
||||
<div class="job-status">全职</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 搜索和筛选功能
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 获取所有筛选元素
|
||||
const keywordSearch = document.getElementById('keyword-search');
|
||||
const jobTitleFilter = document.getElementById('job-title-filter');
|
||||
const jobTypeFilter = document.getElementById('job-type-filter');
|
||||
const jobCategoryFilter = document.getElementById('job-category-filter');
|
||||
const jobStatusFilter = document.getElementById('job-status-filter');
|
||||
|
||||
// 获取所有职位项
|
||||
const jobItems = document.querySelectorAll('.job-item');
|
||||
|
||||
// 添加筛选事件监听
|
||||
function setupFilterListeners() {
|
||||
keywordSearch.addEventListener('input', filterJobs);
|
||||
jobTitleFilter.addEventListener('change', filterJobs);
|
||||
jobTypeFilter.addEventListener('change', filterJobs);
|
||||
jobCategoryFilter.addEventListener('change', filterJobs);
|
||||
jobStatusFilter.addEventListener('change', filterJobs);
|
||||
}
|
||||
|
||||
// 执行筛选
|
||||
function filterJobs() {
|
||||
const keyword = keywordSearch.value.toLowerCase();
|
||||
const selectedTitle = jobTitleFilter.value;
|
||||
const selectedType = jobTypeFilter.value;
|
||||
const selectedCategory = jobCategoryFilter.value;
|
||||
const selectedStatus = jobStatusFilter.value;
|
||||
|
||||
jobItems.forEach(item => {
|
||||
const title = item.querySelector('.job-title').textContent.toLowerCase();
|
||||
const type = item.querySelector('.job-type').textContent;
|
||||
const category = item.querySelector('.job-category').textContent;
|
||||
const status = item.querySelector('.job-status').textContent;
|
||||
const description = item.querySelector('.job-description').textContent.toLowerCase();
|
||||
|
||||
// 检查是否匹配所有筛选条件
|
||||
const keywordMatch = keyword === '' || title.includes(keyword) || description.includes(keyword);
|
||||
const titleMatch = selectedTitle === 'all' || title.includes(selectedTitle.toLowerCase());
|
||||
const typeMatch = selectedType === 'all' || type === selectedType;
|
||||
const categoryMatch = selectedCategory === 'all' || category === selectedCategory;
|
||||
const statusMatch = selectedStatus === 'all' || status === selectedStatus;
|
||||
|
||||
// 显示或隐藏职位项
|
||||
if (keywordMatch && titleMatch && typeMatch && categoryMatch && statusMatch) {
|
||||
item.style.display = 'flex';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化筛选功能
|
||||
setupFilterListeners();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user