1199 lines
60 KiB
HTML
1199 lines
60 KiB
HTML
<!--
|
|
注意：将此代码嵌入 WordPress 时：
|
|
1. 建议使用 "Custom HTML" (自定义HTML) 区块。
|
|
2. 确保你的 WordPress 主题允许加载外部脚本 (Tailwind CDN)。
|
|
3. 如果样式冲突，可能需要根据主题调整 z-index 或 padding。
|
|
-->
|
|
|
|
<!-- 引入 Tailwind CSS (如果主题未包含) -->
|
|
<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">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
screens: {
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6', // 隼瞻科技蓝
|
|
secondary: '#0E42D2',
|
|
accent: '#4facfe', // 浅蓝渐变色
|
|
dark: '#0f172a',
|
|
light: '#f8fafc',
|
|
darkBg: '#1e293b',
|
|
darkerBg: '#0f172a',
|
|
darkCard: '#1e293b'
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 局部样式，避免污染 WordPress 全局样式 */
|
|
#wingsemi-solution-wrapper {
|
|
font-family: 'Inter', sans-serif;
|
|
color: #e2e8f0;
|
|
background-color: #0f172a;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .animate-fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .animate-fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .gradient-text {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .card-hover:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Roadmap Timeline Styles */
|
|
#wingsemi-solution-wrapper .timeline-connector {
|
|
background: linear-gradient(to right, #1e293b, #165DFF, #1e293b);
|
|
height: 4px;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .roadmap-chart-bg {
|
|
background: linear-gradient(180deg, rgba(22, 93, 255, 0) 0%, rgba(22, 93, 255, 0.1) 50%, rgba(22, 93, 255, 0.4) 100%);
|
|
clip-path: polygon(0 100%, 100% 100%, 100% 20%, 75% 60%, 50% 70%, 25% 85%, 0 90%);
|
|
}
|
|
|
|
/* 局部样式，避免污染 WordPress 全局样式 */
|
|
#wingsemi-solution-wrapper {
|
|
font-family: 'Inter', sans-serif;
|
|
color: #e2e8f0;
|
|
background-color: #0f172a;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 添加这个新的样式规则来控制列表行距 */
|
|
#wingsemi-solution-wrapper . compact-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li {
|
|
margin-bottom: 0.75rem !important;
|
|
/* 强制覆盖 WordPress 默认样式 */
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* 如果 WordPress 主题有全局 li 样式，这个会覆盖它 */
|
|
#wingsemi-solution-wrapper .compact-list li p {
|
|
margin: 0.25rem 0 0 0 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .compact-list li h5 {
|
|
margin: 0 0 0.25rem 0 !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
/* RISCAL Q&A 路径绘制动画 */
|
|
@keyframes drawPath {
|
|
0% {
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
}
|
|
|
|
100% {
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.animate-draw-path {
|
|
animation: drawPath 1.5s ease-out forwards;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
}
|
|
|
|
/* Hero区域背景动画 */
|
|
#wingsemi-solution-wrapper .hero-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .hero-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
max-width: 200vw;
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
|
|
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
|
|
animation: heroGradient 20s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heroGradient {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0) rotate(0deg);
|
|
}
|
|
|
|
25% {
|
|
transform: translate(5%, 5%) rotate(5deg);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(0, 10%) rotate(0deg);
|
|
}
|
|
|
|
75% {
|
|
transform: translate(-5%, 5%) rotate(-5deg);
|
|
}
|
|
}
|
|
|
|
/* 网格背景 */
|
|
#wingsemi-solution-wrapper .grid-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
animation: gridMove 30s linear infinite;
|
|
z-index: 0;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
#wingsemi-solution-wrapper .particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
#wingsemi-solution-wrapper .particle {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: rgba(59, 130, 246, 0.3);
|
|
border-radius: 50%;
|
|
animation: float 15s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(100vh) scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-100px) scale(1);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="wingsemi-solution-wrapper" class="w-full overflow-hidden">
|
|
|
|
<!-- 头部 Banner -->
|
|
<section id="ai-hero-section"
|
|
class="relative pt-20 pb-24 bg-gradient-to-br from-darkBg to-darkerBg overflow-hidden">
|
|
<!-- 星座背景Canvas -->
|
|
<canvas id="ai-constellation-canvas" class="absolute top-0 left-0 w-full h-full" style="z-index: 0;"></canvas>
|
|
<!-- 动态背景 -->
|
|
<div class="hero-bg"></div>
|
|
<div class="grid-bg"></div>
|
|
<!-- 粒子效果 -->
|
|
<div class="particles" id="ai-particles"></div>
|
|
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none" style="z-index: 2;">
|
|
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill="#165DFF"
|
|
d="M44.7,-76.4C58.9,-69.2,71.8,-59.1,81.6,-46.6C91.4,-34.1,98.1,-19.2,95.8,-5.3C93.5,8.6,82.2,21.5,70.6,32.2C59,42.9,47.1,51.4,34.8,58.3C22.5,65.2,9.8,70.5,-1.9,73.8C-13.6,77.1,-24.3,78.4,-34.4,74.1C-44.5,69.8,-54,59.9,-62.3,49.1C-70.6,38.3,-77.7,26.6,-79.9,14.1C-82.1,1.6,-79.4,-11.7,-73.2,-23.6C-67,-35.5,-57.3,-46,-46.3,-54.6C-35.3,-63.2,-23,-69.9,-10.1,-71.2C2.8,-72.5,29.6,-83.6,44.7,-76.4Z"
|
|
transform="translate(100 100)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
|
|
<span class="gradient-text">智翼端侧AI</span><br> CPU+NPU融合解决方案
|
|
</h1>
|
|
<div
|
|
class="bg-primary/20 inline-block px-6 pt-4 rounded-full mb-6 border border-primary/30 animate-fade-in">
|
|
<h2 class="text-lg md:text-xl font-semibold text-blue-200">领域专用处理器的自动化敏捷开发新范式</h2>
|
|
</div>
|
|
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
|
|
基于隼瞻 RISC-V 处理器 IP 和 ArchitStudio 敏捷开发平台，打造从硅前到硅后全周期可重构的端侧 AI 处理器集群方案。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 1.5. 行业痛点分析 -->
|
|
<section class="py-20 bg-darkerBg border-t border-gray-800 relative overflow-hidden">
|
|
<!-- 背景元素 -->
|
|
<div class="absolute -left-20 top-20 w-64 h-64 bg-red-900/10 rounded-full blur-3xl pointer-events-none"></div>
|
|
<div class="absolute -right-20 bottom-20 w-64 h-64 bg-blue-900/10 rounded-full blur-3xl pointer-events-none">
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-white mb-6">端侧 AI 应用场景的痛点</h2>
|
|
<div class="max-w-4xl mx-auto bg-gray-800/50 rounded-xl p-6 border-l-4 border-red-500 backdrop-blur-sm">
|
|
<p class="text-lg md:text-xl text-gray-200 leading-relaxed">
|
|
<i class="fa fa-exclamation-triangle text-red-500 mr-2"></i>
|
|
AI 应用的多样性以及对算力需求的持续增长，与端侧芯片在功耗面积上的约束是<span class="text-red-400 font-bold">永恒的矛盾</span>。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
|
|
|
<!-- 1. 业务场景 (左上) -->
|
|
<div
|
|
class="bg-gradient-to-br from-darkBg to-gray-900 p-8 rounded-2xl border border-gray-700/50 shadow-xl animate-fade-in hover:border-orange-500/30 transition-all group">
|
|
<div class="flex items-start gap-5">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-orange-500/10 rounded-xl flex items-center justify-center border border-orange-500/20 group-hover:bg-orange-500/20 transition-all">
|
|
<i class="fa fa-cubes text-orange-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-100 mb-3">丰富多样的端侧AI应用场景</h3>
|
|
<ul class="space-y-3 text-gray-400">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-orange-500 mt-1 mr-2"></i>
|
|
<span>语音识别、图像识别、视频分析、自然语言处理等</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-orange-500 mt-1 mr-2"></i>
|
|
<span>场景碎片化，需求多样化</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-semibold text-orange-500/50 uppercase tracking-wider">Business
|
|
Scenarios</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. AI模型 (右上) -->
|
|
<div
|
|
class="bg-gradient-to-br from-darkBg to-gray-900 p-8 rounded-2xl border border-gray-700/50 shadow-xl animate-fade-in hover:border-blue-500/30 transition-all delay-100 group">
|
|
<div class="flex items-start gap-5">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20 group-hover:bg-blue-500/20 transition-all">
|
|
<i class="fa fa-sitemap text-blue-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-100 mb-3">AI模型种类繁多且持续演进</h3>
|
|
<ul class="space-y-3 text-gray-400">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-blue-500 mt-1 mr-2"></i>
|
|
<span>CNN、RNN、Transformer、轻量化模型等</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-blue-500 mt-1 mr-2"></i>
|
|
<span>新模型层出不穷，架构复杂度不断提升</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-semibold text-blue-500/50 uppercase tracking-wider">AI Models
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 硬件资源 (左下 - 核心挑战) -->
|
|
<div
|
|
class="bg-gradient-to-br from-darkBg to-gray-900 p-8 rounded-2xl border border-gray-700/50 shadow-xl animate-fade-in hover:border-red-500/30 transition-all delay-200 group">
|
|
<div class="flex items-start gap-5">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-red-500/10 rounded-xl flex items-center justify-center border border-red-500/20 group-hover:bg-red-500/20 transition-all">
|
|
<i class="fa fa-microchip text-red-400 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-100 mb-3">硬件资源受限是核心挑战</h3>
|
|
<div class="flex flex-wrap gap-2 mb-2">
|
|
<span
|
|
class="px-2 py-1 bg-red-900/20 border border-red-800/50 rounded text-xs text-red-200">功耗限制</span>
|
|
<span
|
|
class="px-2 py-1 bg-red-900/20 border border-red-800/50 rounded text-xs text-red-200">面积约束</span>
|
|
<span
|
|
class="px-2 py-1 bg-red-900/20 border border-red-800/50 rounded text-xs text-red-200">实时性要求</span>
|
|
</div>
|
|
<div class="mt-4 text-xs font-semibold text-red-500/50 uppercase tracking-wider">Core
|
|
Challenge</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 新数据类型 (右下) -->
|
|
<div
|
|
class="bg-gradient-to-br from-darkBg to-gray-900 p-8 rounded-2xl border border-gray-700/50 shadow-xl animate-fade-in hover:border-gray-500/50 transition-all delay-300 group">
|
|
<div class="flex items-start gap-5">
|
|
<div
|
|
class="flex-shrink-0 w-14 h-14 bg-gray-700/30 rounded-xl flex items-center justify-center border border-gray-600/30 group-hover:bg-gray-700/50 transition-all">
|
|
<i class="fa fa-database text-gray-300 text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-100 mb-3">新数据/算子不断涌现</h3>
|
|
<ul class="space-y-3 text-gray-400">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-gray-500 mt-1 mr-2"></i>
|
|
<span>低比特整型、FP8等等</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-angle-right text-gray-500 mt-1 mr-2"></i>
|
|
<span>对硬件可编程性和扩展性提出更高要求</span>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-4 text-xs font-semibold text-gray-500/50 uppercase tracking-wider">New Data
|
|
Types</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. "智翼"系列 Roadmap (核心亮点) -->
|
|
<section class="py-16 bg-darkerBg relative">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-white mb-4">端侧AI融合解决方案 —— “智翼”系列 Roadmap</h2>
|
|
<p class="text-gray-400">从MCU到高性能边缘计算，全场景覆盖</p>
|
|
</div>
|
|
|
|
<!-- Roadmap 布局 -->
|
|
<div class="relative py-48 overflow-x-auto">
|
|
<!-- 背景趋势线 (示意) -->
|
|
<div class="absolute inset-0 top-20 pointer-events-none roadmap-chart-bg hidden md:block"></div>
|
|
|
|
<div class="flex flex-nowrap md:justify-between gap-6 min-w-[800px] px-4">
|
|
|
|
<!-- 1. 轻翊 -->
|
|
<div class="w-64 flex-shrink-0 group animate-fade-in" style="transition-delay: 100ms;">
|
|
<div
|
|
class="h-full bg-darkBg border border-gray-700 rounded-xl p-6 card-hover relative hover:border-primary transition-all">
|
|
<div
|
|
class="absolute -top-4 left-6 bg-blue-900 text-blue-200 text-xs px-3 py-1 rounded-full border border-blue-700">
|
|
入门级</div>
|
|
<h3 class="text-3xl font-bold text-white mb-1">轻翊</h3>
|
|
<p class="text-sm text-gray-500 mb-4">AI MCU / 目标识别</p>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div>
|
|
<span class="block text-primary font-semibold">CPU: Wing-M130</span>
|
|
<span class="text-gray-400 text-xs">Dhrystone 2.23</span>
|
|
</div>
|
|
<div>
|
|
<span class="block text-green-400 font-semibold">NPU: N100</span>
|
|
<ul class="text-xs text-gray-400 list-disc list-inside">
|
|
<li>算力: 0.1-0.5 TOPS</li>
|
|
<li>主频: 500MHz</li>
|
|
<li>SRAM: 64KB ~ 1.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-2 justify-center text-2xl text-gray-600">
|
|
<i class="fa fa-microchip" title="MCU"></i>
|
|
<i class="fa fa-crosshairs" title="目标识别"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 翔风 -->
|
|
<div class="w-64 flex-shrink-0 group animate-fade-in" style="transition-delay: 200ms;">
|
|
<div
|
|
class="h-full bg-darkBg border border-gray-700 rounded-xl p-6 card-hover relative hover:border-primary transition-all mt-[-20px] md:mt-[-40px]">
|
|
<div
|
|
class="absolute -top-4 left-6 bg-indigo-900 text-indigo-200 text-xs px-3 py-1 rounded-full border border-indigo-700">
|
|
中端交互</div>
|
|
<h3 class="text-3xl font-bold text-white mb-1">翔风</h3>
|
|
<p class="text-sm text-gray-500 mb-4">语音/手势/人脸识别</p>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div>
|
|
<span class="block text-primary font-semibold">CPU: Wing-M510</span>
|
|
<span class="text-gray-400 text-xs">Coremark 5.5</span>
|
|
</div>
|
|
<div>
|
|
<span class="block text-green-400 font-semibold">NPU: P100</span>
|
|
<ul class="text-xs text-gray-400 list-disc list-inside">
|
|
<li>算力: 0.5-2 TOPS</li>
|
|
<li>主频: 750MHz</li>
|
|
<li>SRAM: 2.0 - 8.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-2 justify-center text-2xl text-gray-600">
|
|
<i class="fa fa-microphone" title="语音识别"></i>
|
|
<i class="fa fa-hand-paper-o" title="手势识别"></i>
|
|
<i class="fa fa-user-circle" title="人脸识别"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 凌云 -->
|
|
<div class="w-64 flex-shrink-0 group animate-fade-in" style="transition-delay: 300ms;">
|
|
<div
|
|
class="h-full bg-darkBg border border-gray-700 rounded-xl p-6 card-hover relative hover:border-primary transition-all mt-[-40px] md:mt-[-80px]">
|
|
<div
|
|
class="absolute -top-4 left-6 bg-purple-900 text-purple-200 text-xs px-3 py-1 rounded-full border border-purple-700">
|
|
高端视觉</div>
|
|
<h3 class="text-3xl font-bold text-white mb-1">凌云</h3>
|
|
<p class="text-sm text-gray-500 mb-4">机器视觉 / 目标分类</p>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div>
|
|
<span class="block text-primary font-semibold">CPU: Wing-A500</span>
|
|
<span class="text-gray-400 text-xs">SPECint2006: 5/GHz</span>
|
|
</div>
|
|
<div>
|
|
<span class="block text-green-400 font-semibold">NPU: P200</span>
|
|
<ul class="text-xs text-gray-400 list-disc list-inside">
|
|
<li>算力: 1-8 TOPS</li>
|
|
<li>主频: 1GHz</li>
|
|
<li>SRAM: 8.0 - 16.0MB</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-2 justify-center text-2xl text-gray-600">
|
|
<i class="fa fa-camera" title="机器视觉"></i>
|
|
<i class="fa fa-th-large" title="目标分类"></i>
|
|
<i class="fa fa-commenting-o" title="端侧LLM"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 御空 -->
|
|
<div class="w-64 flex-shrink-0 group animate-fade-in" style="transition-delay: 400ms;">
|
|
<div
|
|
class="h-full bg-gradient-to-b from-blue-900/40 to-darkBg border border-primary/50 rounded-xl p-6 card-hover relative hover:border-primary transition-all mt-[-60px] md:mt-[-120px] shadow-[0_0_30px_rgba(22,93,255,0.2)]">
|
|
<div class="absolute -top-4 left-6 bg-primary text-white text-xs px-3 py-1 rounded-full">
|
|
旗舰算力</div>
|
|
<h3 class="text-3xl font-bold text-white mb-1">御空</h3>
|
|
<p class="text-sm text-gray-300 mb-4">LLM / VLM / 本地部署一体机</p>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div>
|
|
<span class="block text-primary font-semibold">CPU: Wing-A900</span>
|
|
<span class="text-gray-400 text-xs">SPECint2006: 15/GHz</span>
|
|
</div>
|
|
<div>
|
|
<span class="block text-green-400 font-semibold">NPU: M100</span>
|
|
<ul class="text-xs text-gray-300 list-disc list-inside">
|
|
<li>算力: 4-64 TOPS</li>
|
|
<li>主频: 1GHz+</li>
|
|
<li>支持各类大模型</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex gap-2 justify-center text-2xl text-blue-400">
|
|
<i class="fa fa-desktop" title="超分辨率"></i>
|
|
<i class="fa fa-cloud" title="VLM"></i>
|
|
<i class="fa fa-server" title="本地部署"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. ArchitStudio 敏捷开发平台 -->
|
|
<section class="py-16 bg-darkBg border-t border-gray-800">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-white mb-2">领域专用的计算敏捷开发平台</h2>
|
|
<div class="w-20 h-1 bg-primary mx-auto mb-4 rounded"></div>
|
|
<p class="text-xl text-primary font-semibold">ArchitStudio —— 工程师专注于计算融合核心工作</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12 items-center">
|
|
<!-- Left: Description and Value -->
|
|
<div class="lg:w-5/12 animate-fade-in">
|
|
<div
|
|
class="bg-darkerBg p-8 rounded-xl border border-gray-700 shadow-2xl relative overflow-hidden group">
|
|
<!-- Decorative glow -->
|
|
<div
|
|
class="absolute -top-10 -right-10 w-40 h-40 bg-primary/10 rounded-full blur-3xl group-hover:bg-primary/20 transition-all duration-500">
|
|
</div>
|
|
|
|
<h4 class="text-white text-2xl font-bold mb-6 flex items-center">
|
|
<i class="fa fa-cogs text-primary mr-3"></i>核心优势
|
|
</h4>
|
|
<ul class="space-y-6">
|
|
<li class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center mt-1 mr-4">
|
|
<i class="fa fa-bolt text-primary text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-white font-semibold mb-1">统一、简洁的用户接口</h5>
|
|
<p class="text-gray-400 text-sm">降低领域专用处理器设计门槛，让软件定义芯片触手可及。</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center mt-1 mr-4">
|
|
<i class="fa fa-gift text-primary text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<h5 class="text-white font-semibold mb-1">一键式生成交付包</h5>
|
|
<p class="text-gray-400 text-sm">自动生成工具链与验证环境，大幅提升交付效率。</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Diagram Representation -->
|
|
<div class="lg:w-7/12 animate-fade-in w-full">
|
|
<div class="bg-darkerBg p-6 rounded-xl border border-gray-700 relative overflow-hidden shadow-2xl">
|
|
<!-- Top Bar: ArchitStudio -->
|
|
<div
|
|
class="absolute top-0 right-0 bg-primary/20 text-primary text-xs font-bold px-3 py-1 rounded-bl-lg border-b border-l border-primary/30">
|
|
ArchitStudio Flow</div>
|
|
|
|
<!-- Flow Diagram -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between gap-2 mt-4 relative z-10">
|
|
<!-- Input -->
|
|
<div class="flex flex-col items-center gap-2 group">
|
|
<div
|
|
class="w-16 h-16 rounded-full bg-orange-500/10 border border-orange-500/30 flex items-center justify-center group-hover:bg-orange-500/20 transition-all">
|
|
<i class="fa fa-code text-orange-400 text-2xl"></i>
|
|
</div>
|
|
<div
|
|
class="bg-orange-900/40 text-orange-200 text-xs px-3 py-1 rounded border border-orange-500/30">
|
|
目标程序</div>
|
|
</div>
|
|
|
|
<!-- Arrow with Profiler -->
|
|
<div class="flex-grow flex flex-col items-center px-2 relative">
|
|
<div class="text-[10px] text-gray-500 mb-1">Profiler</div>
|
|
<div class="h-[2px] w-full bg-gray-700 relative">
|
|
<div
|
|
class="absolute right-0 top-1/2 transform -translate-y-1/2 -mt-[3px] border-l-[6px] border-l-gray-700 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Central Hub: RISCAL -->
|
|
<div
|
|
class="flex flex-col items-center justify-center w-32 h-32 rounded-full border-4 border-primary/30 bg-darkBg relative z-10 shadow-[0_0_20px_rgba(59,130,246,0.2)]">
|
|
<div class="text-center">
|
|
<div class="text-primary font-bold text-sm">RISCAL</div>
|
|
<div class="text-[10px] text-gray-400">设计指令</div>
|
|
</div>
|
|
<!-- Connecting lines to SDK/HDK -->
|
|
<div class="absolute -right-4 top-1/2 w-4 h-[2px] bg-gray-600"></div>
|
|
</div>
|
|
|
|
<!-- Branches: SDK & HDK -->
|
|
<div class="flex flex-col gap-4 pl-4 border-l border-gray-700 border-dashed">
|
|
<!-- SDK Branch -->
|
|
<div
|
|
class="flex items-center gap-3 bg-gray-800/50 p-3 rounded-lg border border-gray-700 hover:border-blue-500/50 transition-colors">
|
|
<div
|
|
class="bg-blue-900/30 p-2 rounded text-blue-300 font-bold text-xs w-10 text-center">
|
|
SDK</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span
|
|
class="text-[10px] bg-gray-700/50 px-2 py-0.5 rounded text-gray-300">编译器及工具链</span>
|
|
<span
|
|
class="text-[10px] bg-gray-700/50 px-2 py-0.5 rounded text-gray-300">调试器/仿真器</span>
|
|
</div>
|
|
</div>
|
|
<!-- HDK Branch -->
|
|
<div
|
|
class="flex items-center gap-3 bg-gray-800/50 p-3 rounded-lg border border-gray-700 hover:border-blue-500/50 transition-colors">
|
|
<div
|
|
class="bg-indigo-900/30 p-2 rounded text-indigo-300 font-bold text-xs w-10 text-center">
|
|
HDK</div>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-[10px] bg-gray-700/50 px-2 py-0.5 rounded text-gray-300">硬件
|
|
RTL</span>
|
|
<span
|
|
class="text-[10px] bg-gray-700/50 px-2 py-0.5 rounded text-gray-300">验证环境</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arrow Outcome -->
|
|
<div class="hidden md:flex flex-col justify-center h-full px-2 text-gray-600">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</div>
|
|
|
|
<!-- Output -->
|
|
<div class="flex flex-col gap-2">
|
|
<div
|
|
class="flex items-center gap-2 bg-gradient-to-r from-blue-900/40 to-primary/20 p-2 rounded border border-blue-500/30">
|
|
<i class="fa fa-microchip text-blue-300"></i>
|
|
<span class="text-xs text-blue-100">专用处理器</span>
|
|
</div>
|
|
<div class="text-[10px] text-center text-green-400">
|
|
<i class="fa fa-check"></i> 验证完成
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- PPA Feedback Loop -->
|
|
<div class="absolute bottom-4 left-1/3 right-1/3 flex justify-center">
|
|
<div class="text-[10px] text-gray-500 flex items-center gap-1 opacity-50">
|
|
<i class="fa fa-refresh"></i> PPA 优化循环
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 1. 核心价值主张 (Archit Fusion AI) -->
|
|
<section class="py-16 bg-darkBg border-t border-gray-800">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-white mb-4">Archit Fusion AI 统一处理架构</h2>
|
|
<div class="w-20 h-1 bg-primary mx-auto rounded"></div>
|
|
<p class="mt-4 text-gray-400 max-w-2xl mx-auto">
|
|
通过统一处理架构归一化六大特征算子，极大提高硬件资源利用率，提升面效能效比。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div class="relative animate-fade-in">
|
|
<!-- 模拟漏斗图概念 -->
|
|
<div class="bg-darkerBg p-8 rounded-2xl border border-gray-700 shadow-2xl relative overflow-hidden">
|
|
<div
|
|
class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent">
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mb-8">
|
|
<div class="bg-darkBg p-3 rounded border border-gray-600 text-center text-sm text-gray-300">
|
|
3D Matrix</div>
|
|
<div class="bg-darkBg p-3 rounded border border-gray-600 text-center text-sm text-gray-300">
|
|
Convolution</div>
|
|
<div class="bg-darkBg p-3 rounded border border-gray-600 text-center text-sm text-gray-300">
|
|
Normalization</div>
|
|
<div class="bg-darkBg p-3 rounded border border-gray-600 text-center text-sm text-gray-300">
|
|
FFT</div>
|
|
</div>
|
|
<div class="flex justify-center mb-4">
|
|
<div
|
|
class="w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-t-[80px] border-t-primary/30 blur-sm">
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-white mb-2">Unified Processing</h3>
|
|
<p class="text-primary text-sm">Archit Fusion AI</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 animate-fade-in">
|
|
<div class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mt-1">
|
|
<i class="fa fa-cubes text-primary text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-xl font-semibold text-white mb-2">归一化算子</h4>
|
|
<p class="text-gray-400">将复杂的AI算法抽象为 Convolution, Matrix, Normalization, FFT, Softmax
|
|
等核心算子，实现硬件层面的统一加速。</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mt-1">
|
|
<i class="fa fa-refresh text-primary text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-xl font-semibold text-white mb-2">硅前/硅后可重构</h4>
|
|
<p class="text-gray-400">
|
|
<strong>硅前：</strong>平台级高度模块化，根据场景“乐高”式拼搭；<br>
|
|
<strong>硅后：</strong>强可编程性，支持软件定义功能调整，延长芯片生命周期。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center mt-1">
|
|
<i class="fa fa-microchip text-primary text-xl"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h4 class="text-xl font-semibold text-white mb-2">DSA 架构 + NPU 阵列</h4>
|
|
<p class="text-gray-400">结合 RISC-V 通用计算与专用 NPU 阵列，“紧耦合”指令处理高频操作，“松耦合”指令调度大规模矩阵运算。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. NPU "瑞士军刀" 一体化工具平台 -->
|
|
<section class="py-20 bg-darkerBg relative overflow-hidden">
|
|
<!-- Background decorative element -->
|
|
<div
|
|
class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-primary/5 to-transparent pointer-events-none">
|
|
</div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="text-center mb-16 animate-fade-in">
|
|
<h2 class="text-3xl font-bold text-white mb-4">NPU “瑞士军刀” 一体化工具平台</h2>
|
|
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded"></div>
|
|
<p class="text-xl text-gray-300 italic max-w-3xl mx-auto">
|
|
<i class="fa fa-quote-left text-gray-600 mr-2 text-sm"></i>
|
|
工具链，决定 NPU 是否‘好用’，而不仅是‘能跑’。
|
|
<i class="fa fa-quote-right text-gray-600 ml-2 text-sm"></i>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="relative max-w-4xl mx-auto">
|
|
<!-- Vertical Line (Desktop) -->
|
|
<div
|
|
class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-800 transform -translate-x-1/2 z-0">
|
|
</div>
|
|
|
|
<!-- Step 1 -->
|
|
<div
|
|
class="relative z-10 mb-12 flex flex-col md:flex-row items-center justify-between group animate-fade-in transition-all hover:-translate-y-1">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 order-2 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-primary mb-2">硬件友好性检查</h3>
|
|
<div
|
|
class="bg-darkBg p-4 rounded-lg border border-gray-700 shadow-lg text-sm group-hover:border-primary/50 transition-colors">
|
|
<div class="bg-gray-800 rounded px-2 py-1 mb-2 text-gray-300">ONNX Model Preparation</div>
|
|
<div class="text-primary text-lg leading-none mb-2">↓</div>
|
|
<div class="bg-blue-900/30 text-blue-200 border border-blue-800/50 rounded px-2 py-1">Alpha™
|
|
Validate</div>
|
|
<div class="mt-2 text-xs text-gray-500 italic">No → Optimize / Yes → Continue</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-12 h-12 bg-darkBg text-primary font-bold text-xl rounded-full border-4 border-gray-800 flex items-center justify-center mb-4 md:mb-0 md:order-2 order-1 shadow-[0_0_0_4px_rgba(15,23,42,1)] z-10 group-hover:border-primary transition-colors">
|
|
1</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div
|
|
class="relative z-10 mb-12 flex flex-col md:flex-row items-center justify-between group animate-fade-in transition-all hover:-translate-y-1">
|
|
<div class="md:w-5/12 hidden md:block md:order-1"></div>
|
|
<div
|
|
class="w-12 h-12 bg-darkBg text-primary font-bold text-xl rounded-full border-4 border-gray-800 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-[0_0_0_4px_rgba(15,23,42,1)] z-10 group-hover:border-primary transition-colors">
|
|
2</div>
|
|
<div class="md:w-5/12 text-center md:text-left md:order-3 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-white mb-2">模型量化与编译</h3>
|
|
<div
|
|
class="bg-darkBg p-4 rounded-lg border border-gray-700 shadow-lg group-hover:border-primary/50 transition-colors">
|
|
<div class="font-bold text-gray-400 mb-2 border-b border-gray-700 pb-1 text-sm">Alpha™ Build
|
|
</div>
|
|
<div class="bg-primary text-white text-xs py-1.5 px-3 rounded mb-2 shadow-sm">Post-Training
|
|
Quantization (PTQ)</div>
|
|
<div class="bg-blue-600 text-white text-xs py-1.5 px-3 rounded shadow-sm">Alpha™ Compiler
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div
|
|
class="relative z-10 mb-12 flex flex-col md:flex-row items-center justify-between group animate-fade-in transition-all hover:-translate-y-1">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-white mb-2">一致性仿真与评估</h3>
|
|
<div
|
|
class="bg-darkBg p-4 rounded-lg border border-gray-700 shadow-lg text-sm group-hover:border-primary/50 transition-colors">
|
|
<h4 class="text-xs text-gray-500 mb-2 uppercase tracking-wide">Bit-accurate Simulation</h4>
|
|
<div class="space-y-2">
|
|
<div class="bg-gray-800 text-gray-300 py-1.5 px-2 rounded border border-gray-700">Alpha™
|
|
Simulate</div>
|
|
<div class="bg-gray-800 text-gray-300 py-1.5 px-2 rounded border border-gray-700">Alpha™
|
|
Benchmark</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-12 h-12 bg-darkBg text-primary font-bold text-xl rounded-full border-4 border-gray-800 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-[0_0_0_4px_rgba(15,23,42,1)] z-10 group-hover:border-primary transition-colors">
|
|
3</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
<!-- Step 4 (Conditional) -->
|
|
<div
|
|
class="relative z-10 mb-12 flex flex-col md:flex-row items-center justify-between group animate-fade-in transition-all hover:-translate-y-1">
|
|
<div class="md:w-5/12 hidden md:block md:order-1"></div>
|
|
<div
|
|
class="w-12 h-12 bg-darkBg text-accent font-bold text-xl rounded-full border-4 border-gray-800 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-[0_0_0_4px_rgba(15,23,42,1)] z-10 group-hover:border-accent transition-colors">
|
|
4</div>
|
|
<div class="md:w-5/12 text-center md:text-left md:order-3 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-accent mb-2">模型优化服务</h3>
|
|
<div
|
|
class="bg-gradient-to-br from-blue-900/40 to-darkBg p-4 rounded-lg border border-accent/30 shadow-lg text-sm">
|
|
<div class="flex items-center justify-center md:justify-start gap-2 mb-1">
|
|
<i class="fa fa-diamond text-accent"></i>
|
|
<span class="text-blue-200 font-semibold">Premium Optimization</span>
|
|
</div>
|
|
<p class="text-xs text-gray-400">针对未满足需求的模型进行深度定制优化。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5 -->
|
|
<div
|
|
class="relative z-10 flex flex-col md:flex-row items-center justify-between group animate-fade-in transition-all hover:-translate-y-1">
|
|
<div class="md:w-5/12 text-center md:text-right md:order-1 px-4 w-full">
|
|
<h3 class="text-xl font-bold text-white mb-2">应用部署</h3>
|
|
<div
|
|
class="bg-darkBg p-4 border-dashed border-2 border-gray-700 rounded-lg text-gray-400 text-sm">
|
|
<span class="block text-white font-semibold mb-1">AI Runtime Software Stack</span>
|
|
RTL Simulation / FPGA / ASIC Deployment
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-12 h-12 bg-darkBg text-primary font-bold text-xl rounded-full border-4 border-gray-800 flex items-center justify-center mb-4 md:mb-0 md:order-2 shadow-[0_0_0_4px_rgba(15,23,42,1)] z-10 group-hover:border-primary transition-colors">
|
|
5</div>
|
|
<div class="md:w-5/12 hidden md:block md:order-3"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 底部 CTA -->
|
|
<section class="py-16 bg-gradient-to-r from-primary/10 to-darkerBg border-t border-gray-800">
|
|
<div class="container mx-auto px-4 text-center animate-fade-in">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-white mb-6">准备好构建您的 AI 芯片了吗？</h2>
|
|
<p class="text-gray-400 mb-8 max-w-2xl mx-auto">
|
|
依托隼瞻科技成熟的 RISC-V 核与敏捷开发平台，大幅缩短产品上市周期。
|
|
</p>
|
|
<div class="flex justify-center gap-4 popupbox">
|
|
<a
|
|
class="px-8 py-3 bg-primary text-white rounded-md font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/30">
|
|
联系我们
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// 星座背景效果
|
|
class ConstellationBackground {
|
|
constructor(canvasId, sectionId) {
|
|
this.canvas = document.getElementById(canvasId);
|
|
if (!this.canvas) return;
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.section = document.getElementById(sectionId);
|
|
this.particles = [];
|
|
this.mouse = { x: null, y: null, radius: 150 };
|
|
this.particleCount = 80;
|
|
this.connectionDistance = 150;
|
|
this.mouseInfluenceRadius = 200;
|
|
|
|
this.init();
|
|
this.animate();
|
|
this.addEventListeners();
|
|
}
|
|
|
|
init() {
|
|
this.resize();
|
|
this.createParticles();
|
|
}
|
|
|
|
resize() {
|
|
if (!this.section) return;
|
|
this.canvas.width = this.section.offsetWidth;
|
|
this.canvas.height = this.section.offsetHeight;
|
|
}
|
|
|
|
createParticles() {
|
|
this.particles = [];
|
|
for (let i = 0; i < this.particleCount; i++) {
|
|
this.particles.push({
|
|
x: Math.random() * this.canvas.width,
|
|
y: Math.random() * this.canvas.height,
|
|
vx: (Math.random() - 0.5) * 0.5,
|
|
vy: (Math.random() - 0.5) * 0.5,
|
|
radius: Math.random() * 2 + 1,
|
|
baseRadius: Math.random() * 2 + 1,
|
|
color: this.getRandomColor(),
|
|
pulseSpeed: Math.random() * 0.02 + 0.01,
|
|
pulseOffset: Math.random() * Math.PI * 2
|
|
});
|
|
}
|
|
}
|
|
|
|
getRandomColor() {
|
|
const colors = [
|
|
'rgba(59, 130, 246, 0.4)',
|
|
'rgba(96, 165, 250, 0.4)',
|
|
'rgba(139, 92, 246, 0.35)',
|
|
'rgba(147, 197, 253, 0.3)',
|
|
'rgba(255, 255, 255, 0.5)'
|
|
];
|
|
return colors[Math.floor(Math.random() * colors.length)];
|
|
}
|
|
|
|
addEventListeners() {
|
|
window.addEventListener('resize', () => {
|
|
this.resize();
|
|
this.createParticles();
|
|
});
|
|
|
|
if (this.section) {
|
|
this.section.addEventListener('mousemove', (e) => {
|
|
const rect = this.canvas.getBoundingClientRect();
|
|
this.mouse.x = e.clientX - rect.left;
|
|
this.mouse.y = e.clientY - rect.top;
|
|
});
|
|
|
|
this.section.addEventListener('mouseleave', () => {
|
|
this.mouse.x = null;
|
|
this.mouse.y = null;
|
|
});
|
|
}
|
|
}
|
|
|
|
drawParticle(particle, time) {
|
|
const pulse = Math.sin(time * particle.pulseSpeed + particle.pulseOffset) * 0.5 + 0.5;
|
|
const currentRadius = particle.baseRadius + pulse * 1.5;
|
|
|
|
const gradient = this.ctx.createRadialGradient(
|
|
particle.x, particle.y, 0,
|
|
particle.x, particle.y, currentRadius * 3
|
|
);
|
|
gradient.addColorStop(0, particle.color);
|
|
gradient.addColorStop(0.5, particle.color.replace('0.8', '0.3').replace('0.7', '0.2').replace('0.6', '0.15').replace('0.9', '0.4'));
|
|
gradient.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius * 3, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = gradient;
|
|
this.ctx.fill();
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(particle.x, particle.y, currentRadius, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = particle.color;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
drawConnections() {
|
|
for (let i = 0; i < this.particles.length; i++) {
|
|
for (let j = i + 1; j < this.particles.length; j++) {
|
|
const dx = this.particles[i].x - this.particles[j].x;
|
|
const dy = this.particles[i].y - this.particles[j].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.connectionDistance) {
|
|
const opacity = (1 - distance / this.connectionDistance) * 0.5;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.particles[i].x, this.particles[i].y);
|
|
this.ctx.lineTo(this.particles[j].x, this.particles[j].y);
|
|
this.ctx.strokeStyle = `rgba(59, 130, 246, ${opacity})`;
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
drawMouseConnections() {
|
|
if (this.mouse.x === null || this.mouse.y === null) return;
|
|
|
|
this.particles.forEach(particle => {
|
|
const dx = particle.x - this.mouse.x;
|
|
const dy = particle.y - this.mouse.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const opacity = (1 - distance / this.mouseInfluenceRadius) * 0.8;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(this.mouse.x, this.mouse.y);
|
|
this.ctx.lineTo(particle.x, particle.y);
|
|
const gradient = this.ctx.createLinearGradient(
|
|
this.mouse.x, this.mouse.y,
|
|
particle.x, particle.y
|
|
);
|
|
gradient.addColorStop(0, `rgba(139, 92, 246, ${opacity})`);
|
|
gradient.addColorStop(1, `rgba(59, 130, 246, ${opacity * 0.5})`);
|
|
this.ctx.strokeStyle = gradient;
|
|
this.ctx.lineWidth = 1.5;
|
|
this.ctx.stroke();
|
|
}
|
|
});
|
|
|
|
const mouseGlow = this.ctx.createRadialGradient(
|
|
this.mouse.x, this.mouse.y, 0,
|
|
this.mouse.x, this.mouse.y, 30
|
|
);
|
|
mouseGlow.addColorStop(0, 'rgba(139, 92, 246, 0.3)');
|
|
mouseGlow.addColorStop(0.5, 'rgba(59, 130, 246, 0.1)');
|
|
mouseGlow.addColorStop(1, 'transparent');
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(this.mouse.x, this.mouse.y, 30, 0, Math.PI * 2);
|
|
this.ctx.fillStyle = mouseGlow;
|
|
this.ctx.fill();
|
|
}
|
|
|
|
updateParticles() {
|
|
this.particles.forEach(particle => {
|
|
particle.x += particle.vx;
|
|
particle.y += particle.vy;
|
|
|
|
if (this.mouse.x !== null && this.mouse.y !== null) {
|
|
const dx = this.mouse.x - particle.x;
|
|
const dy = this.mouse.y - particle.y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (distance < this.mouseInfluenceRadius) {
|
|
const force = (this.mouseInfluenceRadius - distance) / this.mouseInfluenceRadius;
|
|
const angle = Math.atan2(dy, dx);
|
|
particle.vx += Math.cos(angle) * force * 0.02;
|
|
particle.vy += Math.sin(angle) * force * 0.02;
|
|
particle.vx += Math.cos(angle + Math.PI / 2) * force * 0.005;
|
|
particle.vy += Math.sin(angle + Math.PI / 2) * force * 0.005;
|
|
}
|
|
}
|
|
|
|
const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
|
|
if (speed > 2) {
|
|
particle.vx = (particle.vx / speed) * 2;
|
|
particle.vy = (particle.vy / speed) * 2;
|
|
}
|
|
|
|
particle.vx *= 0.99;
|
|
particle.vy *= 0.99;
|
|
particle.vx += (Math.random() - 0.5) * 0.02;
|
|
particle.vy += (Math.random() - 0.5) * 0.02;
|
|
|
|
if (particle.x < -50) particle.x = this.canvas.width + 50;
|
|
if (particle.x > this.canvas.width + 50) particle.x = -50;
|
|
if (particle.y < -50) particle.y = this.canvas.height + 50;
|
|
if (particle.y > this.canvas.height + 50) particle.y = -50;
|
|
});
|
|
}
|
|
|
|
animate() {
|
|
if (!this.canvas) return;
|
|
const time = Date.now() * 0.001;
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.drawConnections();
|
|
this.drawMouseConnections();
|
|
this.particles.forEach(particle => this.drawParticle(particle, time));
|
|
this.updateParticles();
|
|
requestAnimationFrame(() => this.animate());
|
|
}
|
|
}
|
|
|
|
// 简单的滚动显现脚本
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target); // 只触发一次
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('#wingsemi-solution-wrapper .animate-fade-in').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// 初始化星座背景
|
|
new ConstellationBackground('ai-constellation-canvas', 'ai-hero-section');
|
|
|
|
// 粒子效果初始化
|
|
createParticles();
|
|
});
|
|
|
|
// 创建粒子效果
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('ai-particles');
|
|
if (!particlesContainer) return;
|
|
|
|
const particleCount = 30;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
particle.style.left = Math.random() * 100 + '%';
|
|
particle.style.animationDelay = Math.random() * 15 + 's';
|
|
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
</script> |