883 lines
42 KiB
HTML
883 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>产品详情 - 隼瞻科技</title>
|
||
|
||
<!-- Tailwind (kept, may be used for layout utilities) -->
|
||
<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 (changed to text/css so WordPress won't ignore it) -->
|
||
<style type="text/css">
|
||
/* Colour system used in this component - scoped under #sj-product-page to avoid collisions with WP theme CSS */
|
||
#sj-product-page {
|
||
--primary: #3b82f6;
|
||
--secondary: #2563eb;
|
||
--accent: #60a5fa;
|
||
--dark: #111827;
|
||
--darker: #0b1220;
|
||
/* slightly darker than original to ensure contrast */
|
||
--light: #f8fafc;
|
||
--bg-dark: #1f2937;
|
||
--bg-darker: #111827;
|
||
font-family: "Inter", sans-serif;
|
||
background-color: var(--darker) !important;
|
||
color: #e5e7eb !important;
|
||
}
|
||
|
||
/* Force colours for commonly used utility-like classes INSIDE our scope so WP theme CSS won't override */
|
||
#sj-product-page .bg-bg-darker {
|
||
background-color: var(--bg-darker) !important;
|
||
}
|
||
|
||
#sj-product-page .bg-bg-dark {
|
||
background-color: var(--bg-dark) !important;
|
||
}
|
||
|
||
#sj-product-page .bg-darker {
|
||
background-color: var(--bg-darker) !important;
|
||
}
|
||
|
||
#sj-product-page .bg-dark {
|
||
background-color: var(--bg-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-white {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* Replacements for Tailwind-like fractional opacity classes that use "/" (which can be tricky in CSS selectors).
|
||
In the markup we use bg-primary-20 and bg-primary-10, map them here. */
|
||
#sj-product-page .bg-primary-20 {
|
||
background-color: rgba(59, 130, 246, 0.20) !important;
|
||
}
|
||
|
||
#sj-product-page .bg-primary-10 {
|
||
background-color: rgba(59, 130, 246, 0.10) !important;
|
||
}
|
||
|
||
/* Text greys used in the content */
|
||
#sj-product-page .text-gray-100 {
|
||
color: #f3f4f6 !important;
|
||
}
|
||
|
||
#sj-product-page .text-gray-300 {
|
||
color: #d1d5db !important;
|
||
}
|
||
|
||
#sj-product-page .text-gray-400 {
|
||
color: #9ca3af !important;
|
||
}
|
||
|
||
/* Card and element overrides so WP theme won't change them unexpectedly */
|
||
#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 6px 18px rgba(2, 6, 23, 0.6) !important;
|
||
}
|
||
|
||
#sj-product-page .shadow-lg {
|
||
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.7) !important;
|
||
}
|
||
|
||
/* Utility-ish things used in the layout */
|
||
#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;
|
||
}
|
||
}
|
||
|
||
/* Grid safe defaults inside scope */
|
||
#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));
|
||
}
|
||
}
|
||
|
||
/* Visual helpers included originally */
|
||
#sj-product-page .text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* Scroll animation - same as original but scoped */
|
||
#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);
|
||
}
|
||
|
||
/* ripple and hover effects (scoped) */
|
||
#sj-product-page .hover-float {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
#sj-product-page .hover-float:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
/* background grid graphic - keep scoped to avoid global overrides */
|
||
#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='%239C92AC' 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;
|
||
}
|
||
|
||
/* gradient animation (scoped) */
|
||
@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;
|
||
}
|
||
|
||
/* subtle pulse */
|
||
@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;
|
||
}
|
||
|
||
/* Ensure links inside the scope have our primary colour by default */
|
||
#sj-product-page a {
|
||
color: var(--primary) !important;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
#sj-product-page a:hover {
|
||
color: var(--secondary) !important;
|
||
}
|
||
|
||
/* Ensure images maintain high contrast against dark background */
|
||
#sj-product-page img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
/* Minor typography adjustments inside scope to avoid theme overrides */
|
||
#sj-product-page h1,
|
||
#sj-product-page h2,
|
||
#sj-product-page h3,
|
||
#sj-product-page h4 {
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
#sj-product-page #features h4 {
|
||
margin: 0 !important;
|
||
line-height: 1.5 !important;
|
||
}
|
||
|
||
/* Make sure borders used in cards are visible on dark backgrounds */
|
||
#sj-product-page .border {
|
||
border-color: rgba(255, 255, 255, 0.06) !important;
|
||
}
|
||
|
||
#sj-product-page .border-gray-700 {
|
||
border-color: rgba(148, 163, 184, 0.12) !important;
|
||
}
|
||
</style>
|
||
|
||
<!-- Legacy utility styles (converted from original tailwind-layer rules) - kept scoped and with text/css -->
|
||
<style type="text/css">
|
||
/* small subset of custom utilities used by this page, scoped */
|
||
#sj-product-page .content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
|
||
#sj-product-page .text-gradient {
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
#sj-product-page .product-feature-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
#sj-product-page .section-active {
|
||
color: var(--secondary) !important;
|
||
border-bottom: 2px solid var(--secondary) !important;
|
||
}
|
||
|
||
#sj-product-page .count-up {
|
||
transition: all 0.8s ease-out;
|
||
}
|
||
|
||
#sj-product-page .ripple {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#sj-product-page .ripple:after {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
pointer-events: none;
|
||
background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
|
||
background-repeat: no-repeat;
|
||
background-position: 50%;
|
||
transform: scale(10, 10);
|
||
opacity: 0;
|
||
transition: transform 0.5s, opacity 0.8s;
|
||
}
|
||
|
||
#sj-product-page .ripple:active:after {
|
||
transform: scale(0, 0);
|
||
opacity: 0.3;
|
||
transition: 0s;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Wrapper with an ID so we can scope styles and avoid WP theme interference -->
|
||
<div id="sj-product-page" class="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(31,41,55,0.95), rgba(11,18,32,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-white 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-white mb-8">Wing-M510 Processor IP</h3>
|
||
<p class="text-lg md:text-xl text-gray-300 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-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white text-center">架构</h2>
|
||
<p class="text-gray-300 mb-6 text-center">
|
||
Wing-M510是面向高可靠性高性能应用的RISC-V微控制器。
|
||
</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 bg-bg-darker 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.08) 0%, rgba(17,24,39,0.85) 100%); border-bottom: 1px solid rgba(148,163,184,0.08);">
|
||
<h3 class="text-2xl font-bold text-white text-center">Wing-M510 处理器IP架构</h3>
|
||
</div>
|
||
<div class="p-4">
|
||
<img src="https://www.wingsemitech.com/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-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white text-center">产品参数</h2>
|
||
<p class="text-gray-300 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="bg-bg-darker rounded-xl shadow-md p-8 animate-fade-in">
|
||
<h3 class="text-2xl font-bold mb-6 text-white">性能基准测试</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-gray-400 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-gray-400 font-bold text-2xl">Coremark</span>
|
||
<span class="font-bold text-2xl" style="color: #4cd6b4;">5.5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker rounded-xl shadow-md p-8 animate-fade-in">
|
||
<h3 class="text-xl font-bold mb-6 text-white">功能参数</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-gray-400">ISA</span>
|
||
<span class="font-medium text-white">RV32IMBAFDV_zce_zicond</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-gray-400">Micro Arch</span>
|
||
<span class="font-medium text-white">8-stage, In-order, two-issue</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-gray-400">Function Safety</span>
|
||
<span class="font-medium text-white">ASIL-B (Split Mode), ASIL-D</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-400">Privilege Mode</span>
|
||
<span class="font-medium text-white">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-gray-400">Ext. Interrupts</span>
|
||
<span class="font-medium text-white">Up to 4064 IRQs</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-gray-400">Debug</span>
|
||
<span class="font-medium text-white">JTAG/APB</span>
|
||
</div>
|
||
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||
<span class="text-gray-400">External Bus</span>
|
||
<span class="font-medium text-white">2x AHB/AXI</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="text-gray-400">Memory System</span>
|
||
<span class="font-medium text-white">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-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white 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="bg-bg-darker 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-white">领先的处理器架构性能，强大的控制及运算能力，支持RVV指令集扩展</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持INSTEND客制化指令集扩展功能，提升IP的扩展灵活性</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持增强代码密度的扩展指令集，在提升性能的同时有效减少存储需求及能耗
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持增强的指令和数据跟踪特性，全面提升处理器效率</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持高实时性和低中断延迟，提供极致的处理器性能</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持Hypervisor，可快速部署vRTOS</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持多核配置，多核共享内存</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-white">支持可信执行环境（TEE），提供安全且高效的高性能算力</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-bg-darker 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-white">支持先进的操作系统与应用迁移技术 WingBridge，提升生态兼容性</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-bg-darker 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-white">高可靠性，可同时满足车规ASIL-B/ASIL-D等级要求
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. 应用场景 -->
|
||
<section id="applications" class="section-content py-16 bg-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white text-center">应用场景</h2>
|
||
<p class="text-gray-300 mb-6 text-center">
|
||
Wing-M510处理器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-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-hdd-o"></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-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.3s">
|
||
<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.4s">
|
||
<i class="fa fa-globe"></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="bg-bg-darker 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-white">汽车域控制器</h4>
|
||
<p class="text-gray-300">
|
||
支持车规ASIL-B/ASIL-D等级，为汽车域控制器提供高可靠性的计算平台，满足汽车功能安全和实时性要求。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-hdd-o text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-white">存储设备</h4>
|
||
<p class="text-gray-300">
|
||
提供高效的存储控制能力，支持多协议接口，可用于SSD、HDD等存储设备的主控芯片设计。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-music text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-white">多媒体</h4>
|
||
<p class="text-gray-300">
|
||
支持RVV向量指令集，为音视频编解码、图像处理等多媒体应用提供高性能计算能力。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-industry text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-white">工控</h4>
|
||
<p class="text-gray-300">
|
||
提供高精度、实时性强的工业控制系统解决方案，支持复杂的工业自动化和控制算法，确保工业环境下的稳定可靠运行。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-bg-darker 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-globe text-primary text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-xl font-bold mb-2 text-white">网络设备</h4>
|
||
<p class="text-gray-300">
|
||
支持高通量数据包处理，适用于路由器、交换机、防火墙等网络设备的主控芯片。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. 优势 -->
|
||
<section id="architecture" class="section-content py-16 bg-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white 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 bg-bg-darker 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.08) 0%, rgba(17,24,39,0.85) 100%); border-bottom: 1px solid rgba(148,163,184,0.08);">
|
||
<h3 class="text-2xl font-bold text-white text-center">性能优势</h3>
|
||
</div>
|
||
<div class="p-4">
|
||
<img src="https://www.wingsemitech.com/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 bg-bg-darker 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.08) 0%, rgba(17,24,39,0.85) 100%); border-bottom: 1px solid rgba(148,163,184,0.08);">
|
||
<h3 class="text-2xl font-bold text-white text-center">实时性优势</h3>
|
||
</div>
|
||
<div class="p-4">
|
||
<img src="https://www.wingsemitech.com/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-bg-dark" style="background-color:var(--bg-dark);">
|
||
<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-white text-center">交付包</h2>
|
||
<p class="text-gray-300 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="bg-bg-darker rounded-xl border border-gray-700 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-white">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="bg-bg-darker rounded-xl border border-gray-700 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-white">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="bg-bg-darker rounded-xl border border-gray-700 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-white">文档</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-white 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> |