first commit
This commit is contained in:
qwq
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"permissions": {
|
||||||
|
"allow": [
|
||||||
|
"WebFetch(domain:www.beiyuxing.live)"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,427 @@
|
|||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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">
|
||||||
|
FPGA开发板
|
||||||
|
</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-FPGA-XCKU5P-EVB开发板</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 产品图片 - 可替换为实际产品图片 -->
|
||||||
|
<div class="mb-8 max-w-2xl mx-auto animate-fade-in">
|
||||||
|
<div class="bg-bg-darker p-4 rounded-xl shadow-lg">
|
||||||
|
<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">
|
||||||
|
<!-- 提示：请将上方src属性中的"your_product_image.png"替换为实际产品图片的路径 -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-lg md:text-xl text-gray-300 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-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-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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 详细应用场景描述 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 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-tachometer text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">性能展示</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
通过多种基准测试，评估wing-A内核在不同工作负载下的计算性能和吞吐量。
|
||||||
|
</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-microchip text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">内核评估</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
评估FPGA逻辑单元、存储器和DSP资源的使用情况，优化内核设计。
|
||||||
|
</p>
|
||||||
|
</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-start">
|
||||||
|
<div class="mt-1 bg-primary-10 p-2 rounded-lg">
|
||||||
|
<i class="fa fa-check text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white mt-3">丰富的片内资源，可支持wing-A系列内核运行Linux</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-start">
|
||||||
|
<div class="mt-1 bg-primary-10 p-2 rounded-lg">
|
||||||
|
<i class="fa fa-check text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white mt-3">丰富的外设资源，可适应各种评估场景</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-start">
|
||||||
|
<div class="mt-1 bg-primary-10 p-2 rounded-lg">
|
||||||
|
<i class="fa fa-check text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white mt-3">紧凑，小巧的外观</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1. 产品参数 -->
|
||||||
|
<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-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="bg-bg-darker rounded-xl shadow-md 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-gray-100">
|
||||||
|
<span class="text-gray-400">FPGA</span>
|
||||||
|
<span class="font-medium text-white">Xilinx XCKU5P</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">UART</span>
|
||||||
|
<span class="font-medium text-white">Yes</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">SD/MMC</span>
|
||||||
|
<span class="font-medium text-white">Yes</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">Key</span>
|
||||||
|
<span class="font-medium text-white">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">LED</span>
|
||||||
|
<span class="font-medium text-white">2</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">Switch</span>
|
||||||
|
<span class="font-medium text-white">4</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">HDMI</span>
|
||||||
|
<span class="font-medium text-white">Yes, HDMI 1.4</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">Ethernet</span>
|
||||||
|
<span class="font-medium text-white">Yes, 1Gb ethernet</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">USB</span>
|
||||||
|
<span class="font-medium text-white">Yes, Host or Slave</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">DDR</span>
|
||||||
|
<span class="font-medium text-white">Yes, DDR4 2GB</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">HyperRAM</span>
|
||||||
|
<span class="font-medium text-white">Yes, 32MB</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">QSPI Flash</span>
|
||||||
|
<span class="font-medium text-white">Yes</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">LCD</span>
|
||||||
|
<span class="font-medium text-white">Yes, 800x480 with touch</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">Audio</span>
|
||||||
|
<span class="font-medium text-white">Yes, I2S codec</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">PMOD</span>
|
||||||
|
<span class="font-medium text-white">Yes, 2x 3.3V, 1x 1.8V</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-16 bg-gradient-to-br from-darkBg to-darkerBg overflow-hidden">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">开启FPGA创新之旅</h2>
|
||||||
|
<p class="text-xl text-gray-300 mb-10">
|
||||||
|
无论您是进行原型验证、产品开发还是寻求高性能计算解决方案，FPGA都能为您的项目提供灵活、高效的硬件支持。
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
+790
@@ -0,0 +1,790 @@
|
|||||||
|
<!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-M050 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-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-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="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-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-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-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="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 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-gray-400 text-2xl">Coremark</span>
|
||||||
|
<span class="font-medium text-2xl" style="color: #4cd6b4;">2.52</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>
|
||||||
|
<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">ISA</span>
|
||||||
|
<span class="font-medium text-white">RV32E(M)B_zce_zicond_xwingc</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">2-stage,In-order one-issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">Privilege Mode</span>
|
||||||
|
<span class="font-medium text-white">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-gray-400">Ext. Interrupts</span>
|
||||||
|
<span class="font-medium text-white">Yes (Optional)</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">cJTAG/JTAG</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">External Bus</span>
|
||||||
|
<span class="font-medium text-white">AHB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 3. 产品特点 -->
|
||||||
|
<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">
|
||||||
|
支持RV32E（M）B_zce_zicond_xwingc指令集</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">支持多样化的在线/离线调试手段，可快速定位并解决故障</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">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||||||
|
</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">拥有超低功耗与极小面积，实现极优面效比与能效比</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">满足车规ISO26262 ASIL-D要求</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 应用场景 -->
|
||||||
|
<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-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="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-wifi text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">IoT设备</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.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-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.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-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.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-white">系统伴核</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
作为主处理器的辅助核心，负责系统管理、电源控制、安全监控等任务，提升整个系统的性能和可靠性。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-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="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-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-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>
|
||||||
@@ -0,0 +1,882 @@
|
|||||||
|
<!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-M050S安全核 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-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-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="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-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-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-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="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 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-gray-400 text-2xl">Coremark</span>
|
||||||
|
<span class="font-medium text-2xl" style="color: #4cd6b4;">2.52</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>
|
||||||
|
<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">基础ISA</span>
|
||||||
|
<span class="font-medium text-white">RV32EB_zifencei_zicsr_zce_zicond</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">乘除法</span>
|
||||||
|
<span class="font-medium text-white">可配置M-ext/zmmul</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">Codesize 增强</span>
|
||||||
|
<span class="font-medium text-white">支持隼瞻自定义代码密度增强</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">安全特性</span>
|
||||||
|
<span class="font-medium text-white">寄存器保护:防数据泄露攻击;防功耗攻击:调试接口保护</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">特权模式</span>
|
||||||
|
<span class="font-medium text-white">支持M-mode和U-mode</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">支持可配置2线或者4线JTAG</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">中断</span>
|
||||||
|
<span class="font-medium text-white">支持矢量中断，支持快速的中断现场切换</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">面积</span>
|
||||||
|
<span class="font-medium text-white">30k-35k</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 3. 产品特点 -->
|
||||||
|
<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">
|
||||||
|
支持RV32E（M）B_zce_zicond_xwingc指令集</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">支持多样化的在线/离线调试手段，可快速定位并解决故障</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">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||||||
|
</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">拥有超低功耗与极小面积，实现极优面效比与能效比</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">满足车规ISO26262 ASIL-D要求</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 应用场景 -->
|
||||||
|
<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-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="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">
|
||||||
|
为车载信息娱乐系统、ADAS安全模块和车身控制系统提供高安全性处理能力，满足车规安全要求，保障车辆运行安全。
|
||||||
|
</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-credit-card text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">SIM卡</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
为SIM卡和eSIM芯片提供极小面积、高安全性的处理核心，支持加密算法加速，保障用户身份认证和通信安全。
|
||||||
|
</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-shield 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.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-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-exchange 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.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-white">多媒体</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
为多媒体设备提供内容保护和版权管理功能，支持DRM加密和媒体数据安全传输，防止数字内容被盗版。
|
||||||
|
</p>
|
||||||
|
</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-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-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">安全</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="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-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-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-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="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-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-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>
|
||||||
+833
@@ -0,0 +1,833 @@
|
|||||||
|
<!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-M130 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-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-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-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 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-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-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">业界领先的架构性能，与ARM比肩的面效比与能效比</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">
|
||||||
|
支持基于处理器自动化设计平台扩展领域专用指令集，可快速迭代专用处理器解决方案</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">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||||||
|
</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">支持统一的Wlink调试工具，一站式解决不同调试接口的兼容性问题</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">支持丰富的安全机制，满足信息安全国际CC认证</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">车规核获ISO26262 ASIL-D等级认证</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-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="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 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-gray-400 text-2xl">Coremark</span>
|
||||||
|
<span class="font-medium text-2xl" style="color: #4cd6b4;">4.47</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>
|
||||||
|
<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">ISA</span>
|
||||||
|
<span class="font-medium text-white">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-gray-400">Micro Arch</span>
|
||||||
|
<span class="font-medium text-white">3-stage, In-order, one-issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">Memory System</span>
|
||||||
|
<span class="font-medium text-white">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-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">CJTAG/JTAG</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">External Bus</span>
|
||||||
|
<span class="font-medium text-white">3x AHB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1. 应用场景 -->
|
||||||
|
<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-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="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-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.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-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.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-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.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-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-car text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">车规功能安全</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
符合ISO 26262等车规安全标准，为车载电子系统提供高可靠性的计算平台，支持自动驾驶和智能座舱等安全关键应用。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-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="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-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-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>
|
||||||
+860
@@ -0,0 +1,860 @@
|
|||||||
|
<!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-M130A 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-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-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-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 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-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-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">业界领先的架构性能，与ARM比肩的面效比与能效比</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">
|
||||||
|
支持基于隼瞻科技自研处理器自动化设计平台扩展领域专用指令集，可快速迭代专用处理器解决方案</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">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||||||
|
</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">支持统一的WingLink调试工具，一站式解决不同调试接口的兼容性问题
|
||||||
|
</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">支持丰富的安全机制，满足信息安全国际CC认证</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">车规核获ISO26262 ASIL-D等级认证</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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-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="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 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-gray-400 text-2xl">Coremark</span>
|
||||||
|
<span class="font-medium text-2xl" style="color: #4cd6b4;">4.47</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>
|
||||||
|
<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">ISA</span>
|
||||||
|
<span class="font-medium text-white">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-gray-400">Micro Arch</span>
|
||||||
|
<span class="font-medium text-white">3-stage, In-order, one-issue</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">Memory System</span>
|
||||||
|
<span class="font-medium text-white">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-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">CJTAG/JTAG</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">External Bus</span>
|
||||||
|
<span class="font-medium text-white">3x AHB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1. 应用场景 -->
|
||||||
|
<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-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="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-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.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-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.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-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.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-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-car text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">车规功能安全</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
符合ISO 26262等车规安全标准，为车载电子系统提供高可靠性的计算平台，支持自动驾驶和智能座舱等安全关键应用。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 认证 -->
|
||||||
|
<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">
|
||||||
|
</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-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-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-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="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-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-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>
|
||||||
@@ -0,0 +1,892 @@
|
|||||||
|
<!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-M130S安全核 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-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-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="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-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-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-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="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 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-gray-400 text-2xl">Coremark</span>
|
||||||
|
<span class="font-medium text-2xl" style="color: #4cd6b4;">4.47</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>
|
||||||
|
<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">基础ISA</span>
|
||||||
|
<span class="font-medium text-white">RV32EB_zifencei_zicsr_zce_zicond</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">乘除法</span>
|
||||||
|
<span class="font-medium text-white">可配置M-ext/zmmul</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">Codesize 增强</span>
|
||||||
|
<span class="font-medium text-white">支持隼瞻自定义代码密度增强</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">安全特性</span>
|
||||||
|
<span class="font-medium text-white">寄存器保护:防数据泄露攻击;防功耗攻击:调试接口保护</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">浮点</span>
|
||||||
|
<span class="font-medium text-white">支持zfinx</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">特权模式</span>
|
||||||
|
<span class="font-medium text-white">支持M-mode和U-mode</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">支持可配置2线或者4线JTAG</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">中断</span>
|
||||||
|
<span class="font-medium text-white">支持矢量中断，支持快速的中断现场切换</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between pb-3 border-b border-gray-100">
|
||||||
|
<span class="text-gray-400">面积</span>
|
||||||
|
<span class="font-medium text-white">78k-82k</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-400">Trace</span>
|
||||||
|
<span class="font-medium text-white">支持</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 3. 产品特点 -->
|
||||||
|
<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">
|
||||||
|
支持RV32E（M）B_zce_zicond_xwingc指令集</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">支持多样化的在线/离线调试手段，可快速定位并解决故障</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">支持隼瞻科技自研代码压缩技术，直击RISC-V基础架构代码膨胀问题
|
||||||
|
</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">拥有超低功耗与极小面积，实现极优面效比与能效比</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">满足车规ISO26262 ASIL-D要求</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 1. 应用场景 -->
|
||||||
|
<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-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="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">
|
||||||
|
为车载信息娱乐系统、ADAS安全模块和车身控制系统提供高安全性处理能力，满足车规安全要求，保障车辆运行安全。
|
||||||
|
</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-credit-card text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-bold mb-2 text-white">SIM卡</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
为SIM卡和eSIM芯片提供极小面积、高安全性的处理核心，支持加密算法加速，保障用户身份认证和通信安全。
|
||||||
|
</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-shield 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.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-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-exchange 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.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-white">多媒体</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
为多媒体设备提供内容保护和版权管理功能，支持DRM加密和媒体数据安全传输，防止数字内容被盗版。
|
||||||
|
</p>
|
||||||
|
</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-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-white">安全存储</h4>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
为安全存储设备提供数据加密和访问控制功能，保护敏感数据不被未授权访问，支持多种加密算法和密钥管理机制。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 4. 安全 -->
|
||||||
|
<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">
|
||||||
|
</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-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-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-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="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-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-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>
|
||||||
+765
@@ -0,0 +1,765 @@
|
|||||||
|
<!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>
|
||||||
|
<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.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-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>
|
||||||
|
|
||||||
|
<!-- 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.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 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.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-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>
|
||||||
+932
@@ -0,0 +1,932 @@
|
|||||||
|
<!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: '#165DFF',
|
||||||
|
secondary: '#0E42D2',
|
||||||
|
accent: '#69b1ff',
|
||||||
|
dark: '#0f172a',
|
||||||
|
light: '#f8fafc',
|
||||||
|
darkBg: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
.team-card {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.team-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
.timeline-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -29px;
|
||||||
|
top: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #475569;
|
||||||
|
}
|
||||||
|
.timeline-item:last-child::before {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
.gradient-animate {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
animation: gradientFlow 15s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片网格样式 - 静态展示无悬浮效果 */
|
||||||
|
.ip-grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ip-grid-item {
|
||||||
|
background: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #475569;
|
||||||
|
padding: 8px;
|
||||||
|
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ip-grid-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
aspect-ratio: 3/4;
|
||||||
|
object-fit: cover;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ip-grid-item:hover img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ip-grid-item p {
|
||||||
|
font-size: 11px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #cbd5e1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 横版图片 */
|
||||||
|
.ip-grid-item-horizontal img {
|
||||||
|
aspect-ratio: 4/3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 两列布局 */
|
||||||
|
.ip-two-col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.ip-two-col {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片预览弹窗 - 已禁用 */
|
||||||
|
.image-preview-overlay {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 堆叠提示 - 已禁用 */
|
||||||
|
.stack-hint {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stack-count {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
|
||||||
|
|
||||||
|
<!-- 关于我们页面头部 -->
|
||||||
|
<section class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-darkBg to-darkerBg overflow-hidden gradient-animate">
|
||||||
|
<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">
|
||||||
|
关于我们
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||||
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具
|
||||||
|
</p>
|
||||||
|
<div class="w-24 h-1 bg-primary mx-auto"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 关于我们标签页导航 -->
|
||||||
|
<section class="py-8 bg-darkBg sticky top-16 z-40 border-b border-gray-700 shadow-sm">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<div class="flex overflow-x-auto no-scrollbar gap-6 md:justify-center">
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-primary border-b-2 border-primary" data-tab="company-profile">
|
||||||
|
公司简介
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="vision">
|
||||||
|
愿景与使命
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="ip">
|
||||||
|
知识产权
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="history">
|
||||||
|
发展历程
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="team">
|
||||||
|
团队介绍
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="culture">
|
||||||
|
企业文化
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 关于我们内容部分 -->
|
||||||
|
<section id="about" class="py-16 md:py-24 bg-darkBg">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<!-- 公司简介 -->
|
||||||
|
<div id="company-profile" class="tab-content">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">公司简介</h2>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
隼瞻科技成立于2015年，是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司。公司总部位于中国上海，并在北京、深圳等地设有分支机构。
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
隼瞻科技的核心团队来自国内外顶尖的半导体公司和研究机构，拥有丰富的处理器设计、EDA工具开发和系统集成经验。我们致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具，帮助客户加速产品创新，提升市场竞争力。
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
多年来，隼瞻科技凭借卓越的技术实力和优质的服务，已经成为半导体行业的重要供应商之一。我们的客户遍布全球，包括芯片设计公司、电子设备制造商、物联网设备供应商等多个领域。
|
||||||
|
</p>
|
||||||
|
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||||
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-primary">50+</h3>
|
||||||
|
<p class="text-gray-300">全球客户</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-primary">100+</h3>
|
||||||
|
<p class="text-gray-300">专业技术人员</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-primary">30+</h3>
|
||||||
|
<p class="text-gray-300">核心技术专利</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-primary">8+</h3>
|
||||||
|
<p class="text-gray-300">行业解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl overflow-hidden shadow-xl">
|
||||||
|
<img src="https://picsum.photos/id/1/1200/800" alt="隼瞻科技公司" class="w-full h-auto object-cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 愿景与使命 -->
|
||||||
|
<div id="vision" class="tab-content hidden">
|
||||||
|
<div class="max-w-3xl mx-auto">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">愿景与使命</h2>
|
||||||
|
<p class="text-gray-300">我们致力于成为全球领先的半导体技术解决方案供应商</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<i class="fa fa-eye text-primary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4 text-white">我们的愿景</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
成为全球领先的半导体技术解决方案供应商，通过持续创新和卓越服务，推动半导体行业的发展，为客户创造价值，为社会做出贡献。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<i class="fa fa-bullseye text-primary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-bold mb-4 text-white">我们的使命</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
通过提供高性能、低功耗的处理器IP和先进的EDA设计工具，帮助客户加速产品创新，提升市场竞争力，共同推动技术进步和产业升级。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-12 bg-darkerBg p-8 border border-gray-700 rounded-xl shadow-md">
|
||||||
|
<h3 class="text-2xl font-bold mb-6 text-white text-center">我们的价值观</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i class="fa fa-lightbulb-o text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-lg font-semibold mb-2 text-white">创新</h4>
|
||||||
|
<p class="text-gray-300">持续创新是我们发展的动力</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i class="fa fa-thumbs-up text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-lg font-semibold mb-2 text-white">卓越</h4>
|
||||||
|
<p class="text-gray-300">追求卓越是我们永恒的目标</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i class="fa fa-users text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-lg font-semibold mb-2 text-white">协作</h4>
|
||||||
|
<p class="text-gray-300">团队协作是我们成功的基石</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<i class="fa fa-handshake-o text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-lg font-semibold mb-2 text-white">诚信</h4>
|
||||||
|
<p class="text-gray-300">诚信经营是我们的基本原则</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 知识产权 -->
|
||||||
|
<div id="ip" class="tab-content hidden">
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">知识产权体系</h2>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
坚持自主创新，构建完善的知识产权保护体系与资质认证
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1. 软著著作 -->
|
||||||
|
<div class="mb-12">
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<h3 class="text-2xl font-bold text-white flex items-center">
|
||||||
|
<span class="w-2 h-8 bg-secondary mr-4 rounded-sm"></span>
|
||||||
|
软著著作
|
||||||
|
</h3>
|
||||||
|
<span class="ml-4 text-gray-400 text-sm">11 项软件著作权</span>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-container">
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/WingIDE创建项目平台1-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>WingIDE创建项目平台</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/Maotu软件前端平台1-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>Maotu软件前端平台</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/MaotuArc-Studio后端系统1-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>MaotuArc-Studio后端系统</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/CBT工具软件1-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>CBT工具软件</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/Wing-M130处理器IP核软件-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>Wing-M130处理器IP核软件</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/WingIDE插件快速配置系统V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>WingIDE插件快速配置系统V1_0</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/STUDIO后端软件接口调试软件V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>STUDIO后端软件接口调试软件</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/RISCV时序精准仿真模型平台-上海隼瞻科技有限公司-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>RISCV时序精准仿真模型平台</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/RISC-V时序仿真优化平台V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>RISC-V时序仿真优化平台</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/RISCV仿真器指令转换与集成系统-隼瞻科技（深圳）有限公司-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>RISCV仿真器指令转换与集成系统</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/MaotuArc-Studio前端平台-隼瞻科技（珠海）有限公司-1.jpg" alt="软件著作权" draggable="false">
|
||||||
|
<p>MaotuArc Studio前端平台</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. 资质认证 & 商标注册 两列布局 -->
|
||||||
|
<div class="ip-two-col mb-12">
|
||||||
|
<!-- 资质认证 -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center mb-6">
|
||||||
|
<h3 class="text-2xl font-bold text-white flex items-center">
|
||||||
|
<span class="w-2 h-8 bg-accent mr-4 rounded-sm"></span>
|
||||||
|
资质认证
|
||||||
|
</h3>
|
||||||
|
<span class="ml-4 text-gray-400 text-sm">5 项资质认证</span>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-container" style="grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));">
|
||||||
|
<div class="ip-grid-item">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/南京隼瞻QMS-中文正式ISO9001-1.jpg" alt="资质认证" draggable="false">
|
||||||
|
<p>南京隼瞻QMS(中)</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/南京隼瞻QMS-英文正式ISO9001-1.jpg" alt="资质认证" draggable="false">
|
||||||
|
<p>南京隼瞻QMS(英)</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/SGS认证ISO-26262车规-1.jpg" alt="资质认证" draggable="false">
|
||||||
|
<p>SGS ISO-26262车规</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司中文-1.jpg" alt="资质认证" draggable="false">
|
||||||
|
<p>QMS广州(中)</p>
|
||||||
|
</div>
|
||||||
|
<div class="ip-grid-item">
|
||||||
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司英文-1.jpg" alt="资质认证" draggable="false">
|
||||||
|
<p>QMS广州(英)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 发展历程 -->
|
||||||
|
<div id="history" class="tab-content hidden">
|
||||||
|
<div class="max-w-3xl mx-auto">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">发展历程</h2>
|
||||||
|
<p class="text-gray-300">隼瞻科技的成长与发展历程</p>
|
||||||
|
</div>
|
||||||
|
<div class="relative pl-10">
|
||||||
|
<!-- 2015 -->
|
||||||
|
<div class="timeline-item relative mb-12">
|
||||||
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
||||||
|
<i class="fa fa-flag"></i>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-white">2015年</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
隼瞻科技在上海成立，开始专注于处理器IP和EDA工具的研发。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2017 -->
|
||||||
|
<div class="timeline-item relative mb-12">
|
||||||
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
||||||
|
<i class="fa fa-rocket"></i>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-white">2017年</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
发布首款自主研发的处理器IP产品，获得首批客户认可。同年在北京设立研发中心。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2019 -->
|
||||||
|
<div class="timeline-item relative mb-12">
|
||||||
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
||||||
|
<i class="fa fa-line-chart"></i>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-white">2019年</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
完成A轮融资，公司规模扩大至50人。发布首款EDA设计平台，形成完整的产品线。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2021 -->
|
||||||
|
<div class="timeline-item relative mb-12">
|
||||||
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
||||||
|
<i class="fa fa-globe"></i>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-white">2021年</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
完成B轮融资，在深圳设立销售中心，开始拓展国际市场。客户数量突破30家。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2023 -->
|
||||||
|
<div class="timeline-item relative">
|
||||||
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
||||||
|
<i class="fa fa-trophy"></i>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
||||||
|
<h3 class="text-xl font-bold mb-2 text-white">2023年</h3>
|
||||||
|
<p class="text-gray-300">
|
||||||
|
公司规模扩大至100人，发布新一代高性能处理器IP和先进EDA设计工具，客户遍布全球多个国家和地区。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 团队介绍 -->
|
||||||
|
<div id="team" class="tab-content hidden">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">团队介绍</h2>
|
||||||
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
||||||
|
我们拥有一支高素质、经验丰富的专业团队，致力于为客户提供最优质的产品和服务
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<!-- 团队成员1 -->
|
||||||
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/1005/400/400" alt="张三 - CEO" class="w-full h-64 object-cover">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-white">张三</h3>
|
||||||
|
<p class="text-primary font-medium mb-3">首席执行官 (CEO)</p>
|
||||||
|
<p class="text-gray-300 text-sm mb-4">
|
||||||
|
前某国际半导体公司高级副总裁，拥有20年半导体行业经验，专注于处理器设计和企业管理。
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center space-x-3">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 团队成员2 -->
|
||||||
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/1006/400/400" alt="李四 - CTO" class="w-full h-64 object-cover">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-white">李四</h3>
|
||||||
|
<p class="text-primary font-medium mb-3">首席技术官 (CTO)</p>
|
||||||
|
<p class="text-gray-300 text-sm mb-4">
|
||||||
|
前某知名芯片设计公司技术总监，拥有15年处理器架构设计经验，在高性能计算领域有深厚造诣。
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center space-x-3">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 团队成员3 -->
|
||||||
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/1009/400/400" alt="王五 - COO" class="w-full h-64 object-cover">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-white">王五</h3>
|
||||||
|
<p class="text-primary font-medium mb-3">首席运营官 (COO)</p>
|
||||||
|
<p class="text-gray-300 text-sm mb-4">
|
||||||
|
前某科技公司运营总监，拥有丰富的企业运营和供应链管理经验，擅长优化业务流程和提升效率。
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center space-x-3">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-weixin"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 团队成员4 -->
|
||||||
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/1011/400/400" alt="赵六 - CFO" class="w-full h-64 object-cover">
|
||||||
|
<div class="p-6 text-center">
|
||||||
|
<h3 class="text-xl font-bold mb-1 text-white">赵六</h3>
|
||||||
|
<p class="text-primary font-medium mb-3">首席财务官 (CFO)</p>
|
||||||
|
<p class="text-gray-300 text-sm mb-4">
|
||||||
|
前某投资银行高级分析师，拥有丰富的融资和财务管理经验，曾参与多家科技公司的上市和融资项目。
|
||||||
|
</p>
|
||||||
|
<div class="flex justify-center space-x-3">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
我们的团队由来自国内外顶尖半导体公司和研究机构的专业人才组成，
|
||||||
|
他们拥有丰富的经验和深厚的技术积累，是公司最宝贵的财富。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap justify-center gap-6 mb-8">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-graduation-cap text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-white">博士占比</h4>
|
||||||
|
<p class="text-gray-300">30%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-users text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-white">团队规模</h4>
|
||||||
|
<p class="text-gray-300">100+</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-globe text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-white">国际化程度</h4>
|
||||||
|
<p class="text-gray-300">20%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-briefcase text-primary"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-white">平均经验</h4>
|
||||||
|
<p class="text-gray-300">10+ 年</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 企业文化 -->
|
||||||
|
<div id="culture" class="tab-content hidden">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<h2 class="text-3xl font-bold mb-6 text-white">企业文化</h2>
|
||||||
|
<p class="text-gray-300">隼瞻科技的企业文化是我们共同的价值观和行为准则</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||||
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<h3 class="text-2xl font-bold mb-4 text-white">工作环境</h3>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
我们致力于为员工创造舒适、开放、创新的工作环境，鼓励员工充分发挥自己的才能和创造力。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">开放的办公空间，促进团队协作和沟通</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">完善的福利体系，包括五险一金、带薪年假、健康体检等</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">丰富的团队活动，增强团队凝聚力</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">灵活的工作时间，平衡工作和生活</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<h3 class="text-2xl font-bold mb-4 text-white">职业发展</h3>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
我们重视员工的职业发展，提供丰富的培训和晋升机会，帮助员工实现个人价值和职业目标。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">完善的培训体系，包括技术培训、管理培训等</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">清晰的晋升通道，为有能力的员工提供更广阔的发展空间</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">内部轮岗机会，丰富员工的工作经验</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
||||||
|
<span class="text-gray-300">参与行业前沿项目的机会，提升技术水平</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<h3 class="text-2xl font-bold mb-6 text-white text-center">我们的文化活动</h3>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
||||||
|
<img src="https://picsum.photos/id/1025/400/250" alt="团建活动" class="w-full h-40 object-cover">
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="font-semibold text-white mb-2">团建活动</h4>
|
||||||
|
<p class="text-gray-300 text-sm">定期组织团队建设活动，增强团队凝聚力</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
||||||
|
<img src="https://picsum.photos/id/1076/400/250" alt="技术分享会" class="w-full h-40 object-cover">
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="font-semibold text-white mb-2">技术分享会</h4>
|
||||||
|
<p class="text-gray-300 text-sm">每周举办技术分享会，促进知识交流和分享</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
||||||
|
<img src="https://picsum.photos/id/1043/400/250" alt="运动赛事" class="w-full h-40 object-cover">
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="font-semibold text-white mb-2">运动赛事</h4>
|
||||||
|
<p class="text-gray-300 text-sm">组织各类运动赛事，丰富员工的业余生活</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 合作伙伴 -->
|
||||||
|
<section class="py-16 md:py-24 bg-gradient-to-br from-darkBg to-darkerBg">
|
||||||
|
<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-white">合作伙伴</h2>
|
||||||
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
||||||
|
我们与众多优秀的企业和机构建立了长期稳定的合作关系，共同推动半导体行业的发展
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
|
||||||
|
<!-- 合作伙伴标志 -->
|
||||||
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/100/200/100" alt="合作伙伴1" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/101/200/100" alt="合作伙伴2" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/102/200/100" alt="合作伙伴3" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/103/200/100" alt="合作伙伴4" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
||||||
|
</div>
|
||||||
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
||||||
|
<img src="https://picsum.photos/id/104/200/100" alt="合作伙伴5" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script>
|
||||||
|
// 标签页切换 (确保在脚本开始时执行)
|
||||||
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||||
|
const tabContents = document.querySelectorAll('.tab-content');
|
||||||
|
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
// 移除所有标签按钮的active状态
|
||||||
|
tabButtons.forEach(btn => {
|
||||||
|
btn.classList.remove('text-primary', 'border-b-2', 'border-primary');
|
||||||
|
btn.classList.add('text-gray-400');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加当前标签按钮的active状态
|
||||||
|
button.classList.add('text-primary', 'border-b-2', 'border-primary');
|
||||||
|
button.classList.remove('text-gray-400');
|
||||||
|
|
||||||
|
// 隐藏所有标签内容
|
||||||
|
tabContents.forEach(content => {
|
||||||
|
content.classList.add('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示当前标签内容
|
||||||
|
const tabId = button.getAttribute('data-tab');
|
||||||
|
const activeContent = document.getElementById(tabId);
|
||||||
|
if(activeContent) {
|
||||||
|
activeContent.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回顶部按钮
|
||||||
|
const backToTop = document.getElementById('back-to-top');
|
||||||
|
|
||||||
|
// 只有当存在 back-to-top 元素时才添加事件监听，避免报错
|
||||||
|
if (backToTop) {
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
backToTop.classList.remove('opacity-0', 'invisible');
|
||||||
|
backToTop.classList.add('opacity-100', 'visible');
|
||||||
|
} else {
|
||||||
|
backToTop.classList.add('opacity-0', 'invisible');
|
||||||
|
backToTop.classList.remove('opacity-100', 'visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回顶部按钮
|
||||||
|
backToTop.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId && targetId !== '#') {
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetElement.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 图片预览功能
|
||||||
|
(function() {
|
||||||
|
const overlay = document.getElementById('image-preview-overlay');
|
||||||
|
const previewImage = document.getElementById('preview-image');
|
||||||
|
const previewTitle = document.getElementById('preview-title');
|
||||||
|
const closeBtn = document.getElementById('preview-close');
|
||||||
|
const prevBtn = document.getElementById('preview-prev');
|
||||||
|
const nextBtn = document.getElementById('preview-next');
|
||||||
|
|
||||||
|
let currentImages = [];
|
||||||
|
let currentIndex = 0;
|
||||||
|
let currentCategory = '';
|
||||||
|
|
||||||
|
// 收集所有图片
|
||||||
|
function collectImages(category) {
|
||||||
|
const group = document.querySelector(`.stack-group[data-category="${category}"]`);
|
||||||
|
if (!group) return [];
|
||||||
|
|
||||||
|
const items = group.querySelectorAll('.stack-item');
|
||||||
|
return Array.from(items).map(item => ({
|
||||||
|
src: item.getAttribute('data-src'),
|
||||||
|
title: item.getAttribute('data-title')
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显示预览
|
||||||
|
function showPreview(category, index) {
|
||||||
|
currentCategory = category;
|
||||||
|
currentImages = collectImages(category);
|
||||||
|
currentIndex = index;
|
||||||
|
|
||||||
|
if (currentImages.length === 0) return;
|
||||||
|
|
||||||
|
updatePreviewImage();
|
||||||
|
overlay.classList.add('active');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新预览图片
|
||||||
|
function updatePreviewImage() {
|
||||||
|
const current = currentImages[currentIndex];
|
||||||
|
if (!current) return;
|
||||||
|
|
||||||
|
previewImage.src = current.src;
|
||||||
|
previewTitle.textContent = current.title;
|
||||||
|
|
||||||
|
// 更新导航按钮状态
|
||||||
|
prevBtn.style.opacity = currentIndex === 0 ? '0.3' : '0.7';
|
||||||
|
nextBtn.style.opacity = currentIndex === currentImages.length - 1 ? '0.3' : '0.7';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭预览
|
||||||
|
function closePreview() {
|
||||||
|
overlay.classList.remove('active');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上一张
|
||||||
|
function prevImage() {
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
currentIndex--;
|
||||||
|
updatePreviewImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下一张
|
||||||
|
function nextImage() {
|
||||||
|
if (currentIndex < currentImages.length - 1) {
|
||||||
|
currentIndex++;
|
||||||
|
updatePreviewImage();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 绑定堆叠图片点击事件
|
||||||
|
document.querySelectorAll('.stack-item').forEach((item, idx) => {
|
||||||
|
item.addEventListener('click', function() {
|
||||||
|
const group = this.closest('.stack-group');
|
||||||
|
const category = group.getAttribute('data-category');
|
||||||
|
const items = Array.from(group.querySelectorAll('.stack-item'));
|
||||||
|
const index = items.indexOf(this);
|
||||||
|
showPreview(category, index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 关闭按钮
|
||||||
|
closeBtn.addEventListener('click', closePreview);
|
||||||
|
|
||||||
|
// 点击遮罩关闭
|
||||||
|
overlay.addEventListener('click', function(e) {
|
||||||
|
if (e.target === overlay) {
|
||||||
|
closePreview();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导航按钮
|
||||||
|
prevBtn.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
prevImage();
|
||||||
|
});
|
||||||
|
|
||||||
|
nextBtn.addEventListener('click', function(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
nextImage();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 键盘导航
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (!overlay.classList.contains('active')) return;
|
||||||
|
|
||||||
|
switch(e.key) {
|
||||||
|
case 'Escape':
|
||||||
|
closePreview();
|
||||||
|
break;
|
||||||
|
case 'ArrowLeft':
|
||||||
|
prevImage();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
nextImage();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1557
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+1852
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
|||||||
|
1，智翼端侧AI页面新增 产品亮点 和 RISCAL™ 语言 Q&A 部分
|
||||||
|
2，将2+N 平台战略改到首页展示，并重新设计整个首页
|
||||||
|
3，将DSA 敏捷开发方法学由图片展示改为html可视化展示，与设计语言统一且更美观
|
||||||
|
4，首页，ArchitStudio和智翼端侧AI头部设计统一
|
||||||
|
5，重新设计页眉菜单，修复移动端菜单问题
|
||||||
|
6，修复部分介绍错误
|
||||||
|
7，后台工单系统--构建中，已初步完成
|
||||||
@@ -0,0 +1,493 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<!-- 注意：在 WordPress 中不需要 html/head/body 标签，只需保留 script 和内容容器 -->
|
||||||
|
<div id="wingsemi-root" class="wingsemi-scope font-inter bg-[#0f172a] !text-gray-200 relative w-full overflow-hidden">
|
||||||
|
|
||||||
|
<!-- 引入 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">
|
||||||
|
<main class="flex-1">
|
||||||
|
<!-- 头部 Hero Section -->
|
||||||
|
<section class="relative pt-20 md:pt-32 pb-20 overflow-hidden bg-[#1e293b]">
|
||||||
|
<!-- 背景装饰 -->
|
||||||
|
<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-white 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-gray-300 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="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
||||||
|
<div class="text-3xl font-bold !text-primary mb-1">30%</div>
|
||||||
|
<div class="text-xs !text-gray-400">代码空间节省</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
||||||
|
<div class="text-3xl font-bold !text-primary mb-1">5-20%</div>
|
||||||
|
<div class="text-xs !text-gray-400">库体积优于竞品</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
||||||
|
<div class="text-3xl font-bold !text-primary mb-1">Xwingc</div>
|
||||||
|
<div class="text-xs !text-gray-400">自主研发扩展</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-darkCard/50 backdrop-blur-sm p-4 rounded-lg border border-gray-700">
|
||||||
|
<div class="text-3xl font-bold !text-primary mb-1">WingGCC</div>
|
||||||
|
<div class="text-xs !text-gray-400">深度定制编译器</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 背景痛点 -->
|
||||||
|
<section class="py-16 bg-[#0f172a] border-b border-gray-800">
|
||||||
|
<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-white mb-4">技术背景与挑战</h2>
|
||||||
|
<div class="w-20 h-1 bg-primary mx-auto"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-darkCard/30 rounded-2xl p-8 md:p-12 border border-gray-700 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-white mb-4">RISC-V 的双刃剑</h3>
|
||||||
|
<p class="!text-gray-300 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-gray-400">
|
||||||
|
<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-darkBg p-6 rounded-xl border border-gray-700 relative">
|
||||||
|
<div
|
||||||
|
class="absolute -top-3 -right-3 bg-red-500 !text-white 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-gray-400">
|
||||||
|
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-gray-400">普通 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-gray-400">通过提高代码密度，显著减少对 Memory 的需求，降低
|
||||||
|
Memory 面积与成本。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 四大技术手段 -->
|
||||||
|
<section class="py-20 bg-[#1e293b]">
|
||||||
|
<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-white mb-6">四大技术手段</h2>
|
||||||
|
<p class="!text-gray-400">全栈式优化策略，从指令集到工具链</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<!-- 01 社区贡献 -->
|
||||||
|
<div
|
||||||
|
class="bg-darkCard 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-white mb-3">社区贡献</h3>
|
||||||
|
<p class="!text-gray-400 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="bg-darkCard 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-white mb-3">Xwingc 扩展指令集</h3>
|
||||||
|
<p class="!text-gray-400 text-sm leading-relaxed mb-4">
|
||||||
|
支持将自主研发的<span class="!text-white font-semibold">代码密度增强指令 Xwingc 扩展</span>加入到处理器核中。
|
||||||
|
</p>
|
||||||
|
<div class="bg-darkerBg p-3 rounded text-xs !text-gray-300 border border-gray-700">
|
||||||
|
<div class="flex justify-between items-center mb-2">
|
||||||
|
<span>Arm: </span> <span class="font-mono bg-gray-800 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 bg-gray-800 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="bg-darkCard 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-white mb-3">WingGCC 编译器</h3>
|
||||||
|
<p class="!text-gray-400 text-sm leading-relaxed">
|
||||||
|
解决了 GCC 领域针对性不强的问题。完整匹配各种标准扩展指令和隼瞻自定义扩展指令，同时适配隼瞻<span
|
||||||
|
class="!text-primary">专用高效微架构</span>，充分发挥性能。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 04 WingLib 基础库 -->
|
||||||
|
<div class="bg-darkCard 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-white mb-3">WingLib 基础库</h3>
|
||||||
|
<ul class="!text-gray-400 text-sm space-y-2 list-disc pl-4">
|
||||||
|
<li>提供标准C库和数学库，专为 code size 和速度优化，优于竞品 <span
|
||||||
|
class="!text-white font-bold">5%~20%</span>。</li>
|
||||||
|
<li>提供优化的 DSP 库，结合 DSA 技术，性能达竞品数倍。</li>
|
||||||
|
<li>提供优化的第三方中间件。</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 优化成果数据 -->
|
||||||
|
<section class="py-20 bg-[#0f172a]">
|
||||||
|
<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 bg-darkCard/20 p-8 md:p-10 rounded-2xl border border-gray-800 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-white 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-gray-300 mb-8 leading-relaxed text-lg relative z-10">
|
||||||
|
我们的优化路径清晰可见。从基础 GCC 出发，叠加 Zc/Zicond 扩展，再引入 Wing 独有的代码密度增强技术，最终实现大幅度的空间节省。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 底部信息同样放在深色容器内，增加对比度 -->
|
||||||
|
<div
|
||||||
|
class="mt-auto p-5 bg-[#1e293b]/80 backdrop-blur-sm border border-gray-700/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 bg-darkCard/20 p-8 md:p-10 rounded-2xl border border-gray-800 animate-fade-in relative z-10 shadow-lg">
|
||||||
|
<h3
|
||||||
|
class="text-xl font-semibold !text-white mb-8 flex flex-col sm:flex-row sm:items-end gap-2">
|
||||||
|
<span>代码密度百分比</span>
|
||||||
|
<span class="text-sm font-normal !text-gray-400">(数值越小越好)</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-white font-bold text-lg">100%</div>
|
||||||
|
<div class="text-xs !text-gray-400 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-white font-bold text-lg">80%</div>
|
||||||
|
<div
|
||||||
|
class="text-xs !text-gray-400 mt-1 font-medium bg-darkCard/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-white font-bold text-lg">75%</div>
|
||||||
|
<div
|
||||||
|
class="text-xs !text-gray-400 mt-1 font-medium bg-darkCard/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-white font-bold text-xl drop-shadow-[0_0_8px_rgba(105,177,255,0.8)] !text-accent">
|
||||||
|
70%</div>
|
||||||
|
<div
|
||||||
|
class="text-sm !text-gray-200 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-gray-400 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 bg-darkCard text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl pointer-events-auto border border-gray-700">
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<button onclick="closeModal()"
|
||||||
|
class="absolute top-4 right-4 text-gray-400 hover:text-white 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 bg-darkCard">
|
||||||
|
<!-- 这里 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: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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-gray-400,
|
||||||
|
.contact-section .text-gray-400 {
|
||||||
|
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: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #475569;
|
||||||
|
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: #fff;
|
||||||
|
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-gray-200 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-white" style="margin-bottom: 24px !important;">联系我们</h2>
|
||||||
|
<p class="section-desc text-gray-400 max-w-2xl mx-auto" style="margin: 0 auto !important;">
|
||||||
|
如果您想了解更多关于我们的产品和服务，或者有任何合作意向，欢迎随时与我们联系
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="bg-darkCard p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<!-- 联系信息区域 -->
|
||||||
|
<div class="contact-info-grid mb-8 pb-8 border-b border-gray-700">
|
||||||
|
<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-white" style="margin: 0 0 8px 0 !important;">热线电话</h3>
|
||||||
|
<p class="text-gray-400 text-base" style="margin: 0 !important; line-height: 1.6 !important;">025-58181916</p>
|
||||||
|
<p class="text-gray-400 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-white" style="margin: 0 0 8px 0 !important;">商务代表</h3>
|
||||||
|
<p class="text-gray-400 text-base" style="margin: 0 !important; line-height: 1.6 !important;">Jack 吴 | 17372837832</p>
|
||||||
|
<p class="text-gray-400 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-white 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-gray-700 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-white text-base" style="margin: 0 !important;">广州市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">上海市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">深圳市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">珠海市</h4>
|
||||||
|
<p class="text-gray-400 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-white 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>
|
||||||
+839
@@ -0,0 +1,839 @@
|
|||||||
|
<!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: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 汉堡按钮动画样式 */
|
||||||
|
.hamburger-line {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 2px;
|
||||||
|
background-color: currentColor;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-active .hamburger-line:nth-child(1) {
|
||||||
|
transform: translateY(8px) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-active .hamburger-line:nth-child(2) {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scaleX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-active .hamburger-line:nth-child(3) {
|
||||||
|
transform: translateY(-8px) rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端菜单遮罩层 */
|
||||||
|
.mobile-menu-overlay {
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: opacity 0.4s ease, visibility 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端菜单面板动画 */
|
||||||
|
.mobile-menu-panel {
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-panel.active {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 菜单项级联动画 */
|
||||||
|
.mobile-menu-item {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为每个菜单项设置递增的延迟 */
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(6) { transition-delay: 0.3s; }
|
||||||
|
.mobile-menu-panel.active .mobile-menu-item:nth-child(7) { transition-delay: 0.35s; }
|
||||||
|
|
||||||
|
/* 手风琴动画 */
|
||||||
|
.accordion-content {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.4s ease;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-content.open {
|
||||||
|
max-height: 1000px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: max-height 0.4s ease-in-out, opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-icon {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accordion-icon.rotated {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 霓虹光效边框 */
|
||||||
|
.neon-border {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -1px;
|
||||||
|
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #3b82f6);
|
||||||
|
border-radius: inherit;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon-border:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移除移动端按钮的焦点和激活状态的蓝色底框 */
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义滚动条 */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(59, 130, 246, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(59, 130, 246, 0.8);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
|
||||||
|
<!-- 导航栏（页眉） -->
|
||||||
|
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-darkBg/70 backdrop-blur-sm shadow-md">
|
||||||
|
<div class="container mx-auto px-8 sm:px-12 lg:px-16 max-w-7xl">
|
||||||
|
<div class="flex justify-between items-center py-4">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<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-gray-300 hover:text-white transition-colors">首页</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 产品中心 -->
|
||||||
|
<div class="relative group nav-mega-menu">
|
||||||
|
<a class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-white 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-darkCard/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-gray-700">
|
||||||
|
<div class="container mx-auto px-8 py-8 max-w-7xl">
|
||||||
|
<div class="grid grid-cols-5 gap-6">
|
||||||
|
<!-- 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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item cursor-pointer border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">RISC-V处理器IP</span>
|
||||||
|
<i class="fa fa-chevron-right mt-2 text-xs text-gray-500 group-hover/item:text-white transition-colors"></i>
|
||||||
|
</a>
|
||||||
|
<!-- 三级菜单 - 三列布局 -->
|
||||||
|
<div class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-darkCard rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-[420px] border border-gray-700">
|
||||||
|
<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-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M050</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M130</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m510/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M510</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-a500/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-A500</a>
|
||||||
|
<a href="products.html#wing-a700" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-A700</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="products.html#wing-m050a" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M050A</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130a/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M130A</a>
|
||||||
|
<a href="products.html#wing-m510a" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M510A</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-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M050S</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130s/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white 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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">智翼端侧AI解决方案</span>
|
||||||
|
</a>
|
||||||
|
<!-- 配套开发工具 -->
|
||||||
|
<a href="https://www.beiyuxing.live/wlink/" class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/50 hover:border-gray-600">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||||
|
<i class="fa fa-wrench text-2xl text-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">配套开发工具</span>
|
||||||
|
</a>
|
||||||
|
<!-- FPGA -->
|
||||||
|
<a href="https://www.beiyuxing.live/fpga/" class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/50 hover:border-gray-600">
|
||||||
|
<div class="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500/20 to-pink-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
||||||
|
<i class="fa fa-cubes text-2xl text-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">FPGA</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 技术中心 -->
|
||||||
|
<div class="relative group nav-mega-menu">
|
||||||
|
<a class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-white 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-darkCard/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-gray-700">
|
||||||
|
<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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item cursor-pointer border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">IP相关技术</span>
|
||||||
|
<i class="fa fa-chevron-right mt-2 text-xs text-gray-500 group-hover/item:text-white transition-colors"></i>
|
||||||
|
</a>
|
||||||
|
<!-- 三级菜单 -->
|
||||||
|
<div class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-darkCard rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-56 border border-gray-700">
|
||||||
|
<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-gray-300 hover:bg-white/10 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-compress mr-3 text-gray-400"></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-gray-300 hover:bg-white/10 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-bolt mr-3 text-gray-400"></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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-gray-300 group-hover/item:text-white">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-gray-300 hover:text-white 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-gray-300 hover:text-white 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="relative w-10 h-10 flex flex-col items-center justify-center space-y-1.5 text-gray-300 hover:text-white transition-colors focus:outline-none z-50">
|
||||||
|
<span class="hamburger-line"></span>
|
||||||
|
<span class="hamburger-line"></span>
|
||||||
|
<span class="hamburger-line"></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 移动端导航菜单 - 全屏滑出式 -->
|
||||||
|
<div id="mobile-menu-overlay" class="mobile-menu-overlay fixed inset-0 bg-black/60 z-40 opacity-0 invisible tablet:hidden"></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu-panel" class="mobile-menu-panel fixed top-0 right-0 h-full w-[85vw] max-w-[360px] bg-gradient-to-b from-darkBg to-darkerBg z-50 shadow-2xl tablet:hidden border-l border-gray-700/50">
|
||||||
|
<!-- 装饰性背景元素 -->
|
||||||
|
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-primary/10 to-transparent pointer-events-none"></div>
|
||||||
|
<div class="absolute top-20 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
|
||||||
|
|
||||||
|
<!-- 菜单头部 -->
|
||||||
|
<div class="relative flex items-center justify-between p-6 border-b border-gray-700/50">
|
||||||
|
<span class="text-lg font-semibold text-white">菜单</span>
|
||||||
|
<button id="mobile-menu-close" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800/50 text-gray-400 hover:text-white hover:bg-gray-700/50 transition-all">
|
||||||
|
<i class="fa fa-times text-sm"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 菜单内容 - 可滚动区域 -->
|
||||||
|
<div class="relative h-[calc(100%-80px)] overflow-y-auto custom-scrollbar py-4 px-4">
|
||||||
|
<nav class="space-y-1">
|
||||||
|
<!-- 首页 -->
|
||||||
|
<div class="mobile-menu-item">
|
||||||
|
<a href="https://www.beiyuxing.live/" class="flex items-center py-3 px-4 text-base font-medium text-gray-300 hover:text-white hover:bg-white/5 rounded-xl transition-all group">
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800/50 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<i class="fa fa-home text-sm text-gray-400 group-hover:text-primary"></i>
|
||||||
|
</span>
|
||||||
|
首页
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 产品中心 -->
|
||||||
|
<div class="mobile-menu-item">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-3 px-4 text-base font-medium text-gray-300 hover:text-white hover:bg-white/5 rounded-xl transition-all group">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800/50 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<i class="fa fa-cube text-sm text-gray-400 group-hover:text-primary"></i>
|
||||||
|
</span>
|
||||||
|
产品中心
|
||||||
|
</div>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content pl-4">
|
||||||
|
<div class="py-2 space-y-1 border-l-2 border-gray-700/50 ml-7 pl-4">
|
||||||
|
<!-- RISC-V处理器IP -->
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-400 hover:text-white rounded-lg transition-colors">
|
||||||
|
<span>RISC-V处理器IP</span>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<div class="py-2 space-y-1">
|
||||||
|
<!-- 通用处理器IP -->
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-2 px-3 text-xs text-gray-500 hover:text-gray-300 rounded-lg transition-colors">
|
||||||
|
<span>通用处理器IP</span>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<div class="py-1 space-y-1">
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m050/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M050</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M130</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m510/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M510</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-a500/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-A500</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 车规处理器IP -->
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-2 px-3 text-xs text-gray-500 hover:text-gray-300 rounded-lg transition-colors">
|
||||||
|
<span>车规处理器IP</span>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<div class="py-1 space-y-1">
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m050a/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M050A</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130a/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M130A</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 安全处理器IP -->
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-2 px-3 text-xs text-gray-500 hover:text-gray-300 rounded-lg transition-colors">
|
||||||
|
<span>安全处理器IP</span>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<div class="py-1 space-y-1">
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m050s/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M050S</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130s/" class="block py-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">Wing-M130S</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://www.beiyuxing.live/architstudio-2/" class="block py-2 px-3 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
|
||||||
|
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="block py-2 px-3 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
|
||||||
|
智翼端侧AI解决方案
|
||||||
|
</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wlink/" class="block py-2 px-3 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
|
||||||
|
配套开发工具
|
||||||
|
</a>
|
||||||
|
<a href="https://www.beiyuxing.live/fpga/" class="block py-2 px-3 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
|
||||||
|
FPGA
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 技术中心 -->
|
||||||
|
<div class="mobile-menu-item">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-3 px-4 text-base font-medium text-gray-300 hover:text-white hover:bg-white/5 rounded-xl transition-all group">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800/50 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<i class="fa fa-flask text-sm text-gray-400 group-hover:text-primary"></i>
|
||||||
|
</span>
|
||||||
|
技术中心
|
||||||
|
</div>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content pl-4">
|
||||||
|
<div class="py-2 space-y-1 border-l-2 border-gray-700/50 ml-7 pl-4">
|
||||||
|
<div class="accordion-item">
|
||||||
|
<button class="accordion-trigger w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-400 hover:text-white rounded-lg transition-colors">
|
||||||
|
<span>IP相关技术</span>
|
||||||
|
<i class="accordion-icon fa fa-chevron-down text-xs transition-transform duration-300"></i>
|
||||||
|
</button>
|
||||||
|
<div class="accordion-content">
|
||||||
|
<div class="py-1 space-y-1">
|
||||||
|
<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-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 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-1.5 px-3 text-xs text-gray-500 hover:text-primary hover:pl-4 transition-all">中断实时性技术</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.beiyuxing.live/ai%e8%9e%8d%e5%90%88%e6%8a%80%e6%9c%af/" class="block py-2 px-3 text-sm text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors">
|
||||||
|
AI融合技术
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新闻中心 -->
|
||||||
|
<div class="mobile-menu-item">
|
||||||
|
<a href="https://www.beiyuxing.live/news/" class="flex items-center py-3 px-4 text-base font-medium text-gray-300 hover:text-white hover:bg-white/5 rounded-xl transition-all group">
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800/50 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<i class="fa fa-newspaper-o text-sm text-gray-400 group-hover:text-primary"></i>
|
||||||
|
</span>
|
||||||
|
新闻中心
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关于我们 -->
|
||||||
|
<div class="mobile-menu-item">
|
||||||
|
<a href="https://www.beiyuxing.live/about/" class="flex items-center py-3 px-4 text-base font-medium text-gray-300 hover:text-white hover:bg-white/5 rounded-xl transition-all group">
|
||||||
|
<span class="w-8 h-8 flex items-center justify-center rounded-lg bg-gray-800/50 mr-3 group-hover:bg-primary/20 transition-colors">
|
||||||
|
<i class="fa fa-info-circle text-sm text-gray-400 group-hover:text-primary"></i>
|
||||||
|
</span>
|
||||||
|
关于我们
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 加入我们按钮 -->
|
||||||
|
<div class="mobile-menu-item pt-4">
|
||||||
|
<a href="https://www.beiyuxing.live/position/" class="flex items-center justify-center py-3 px-4 bg-gradient-to-r from-primary to-secondary text-white rounded-xl font-medium shadow-lg shadow-primary/25 hover:shadow-primary/40 transform hover:scale-[1.02] transition-all neon-border overflow-hidden">
|
||||||
|
<i class="fa fa-user-plus mr-2"></i>
|
||||||
|
加入我们
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 底部装饰 -->
|
||||||
|
<div class="mt-8 pt-6 border-t border-gray-700/50">
|
||||||
|
<div class="flex justify-center space-x-6">
|
||||||
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800/50 text-gray-400 hover:text-white hover:bg-primary/20 transition-all">
|
||||||
|
<i class="fa fa-weixin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800/50 text-gray-400 hover:text-white hover:bg-primary/20 transition-all">
|
||||||
|
<i class="fa fa-weibo"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800/50 text-gray-400 hover:text-white hover:bg-primary/20 transition-all">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p class="text-center text-xs text-gray-600 mt-4">© 2024 隼瞻科技</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-darkerBg text-white py-16 border-t border-gray-800 mt-auto">
|
||||||
|
<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">
|
||||||
|
<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-gray-400 mb-6 text-sm leading-relaxed">
|
||||||
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具。
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800 text-gray-400 hover:text-white hover:bg-primary transition-all">
|
||||||
|
<i class="fa fa-weixin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800 text-gray-400 hover:text-white hover:bg-primary transition-all">
|
||||||
|
<i class="fa fa-weibo"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-800 text-gray-400 hover:text-white hover:bg-primary transition-all">
|
||||||
|
<i class="fa fa-linkedin"></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/elementor-%e9%a1%b5%e9%9d%a2-1465/" class="text-gray-400 hover:text-white transition-colors text-sm">ArchitStudio开发平台</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1442/" class="text-gray-400 hover:text-white transition-colors text-sm">智翼端侧AI解决方案</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1524/" class="text-gray-400 hover:text-white transition-colors text-sm">配套开发工具</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1532/" class="text-gray-400 hover:text-white transition-colors text-sm">FPGA</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-gray-400 hover:text-white transition-colors text-sm">AI融合技术</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1490/" class="text-gray-400 hover:text-white transition-colors text-sm">代码压缩技术</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1473/" class="text-gray-400 hover:text-white transition-colors text-sm">中断实时性技术</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-725/" class="text-gray-400 hover:text-white transition-colors text-sm">公司简介</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1173/" class="text-gray-400 hover:text-white transition-colors text-sm">加入我们</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-683/" class="text-gray-400 hover:text-white transition-colors text-sm">新闻动态</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center mt-12">
|
||||||
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
||||||
|
© <span id="current-year">2024</span> 隼瞻科技. 保留所有权利.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">隐私政策</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">使用条款</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 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 z-30">
|
||||||
|
<i class="fa fa-arrow-up"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- JavaScript -->
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// 导航栏滚动效果
|
||||||
|
const navbar = document.getElementById('navbar');
|
||||||
|
const backToTop = document.getElementById('back-to-top');
|
||||||
|
|
||||||
|
if (navbar) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端菜单控制
|
||||||
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||||
|
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
||||||
|
const mobileMenuPanel = document.getElementById('mobile-menu-panel');
|
||||||
|
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
||||||
|
const body = document.body;
|
||||||
|
|
||||||
|
function openMobileMenu() {
|
||||||
|
mobileMenuButton.classList.add('hamburger-active');
|
||||||
|
mobileMenuPanel.classList.add('active');
|
||||||
|
mobileMenuOverlay.classList.remove('opacity-0', 'invisible');
|
||||||
|
mobileMenuOverlay.classList.add('opacity-100', 'visible');
|
||||||
|
body.style.overflow = 'hidden'; // 防止背景滚动
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeMobileMenu() {
|
||||||
|
mobileMenuButton.classList.remove('hamburger-active');
|
||||||
|
mobileMenuPanel.classList.remove('active');
|
||||||
|
mobileMenuOverlay.classList.add('opacity-0', 'invisible');
|
||||||
|
mobileMenuOverlay.classList.remove('opacity-100', 'visible');
|
||||||
|
body.style.overflow = ''; // 恢复背景滚动
|
||||||
|
|
||||||
|
// 可选：关闭所有手风琴
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelectorAll('.accordion-content').forEach(content => {
|
||||||
|
content.classList.remove('open');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.accordion-icon').forEach(icon => {
|
||||||
|
icon.classList.remove('rotated');
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mobileMenuButton) {
|
||||||
|
mobileMenuButton.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (mobileMenuPanel.classList.contains('active')) {
|
||||||
|
closeMobileMenu();
|
||||||
|
} else {
|
||||||
|
openMobileMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mobileMenuClose) {
|
||||||
|
mobileMenuClose.addEventListener('click', closeMobileMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mobileMenuOverlay) {
|
||||||
|
mobileMenuOverlay.addEventListener('click', closeMobileMenu);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 手风琴效果
|
||||||
|
const accordionTriggers = document.querySelectorAll('.accordion-trigger');
|
||||||
|
|
||||||
|
accordionTriggers.forEach(trigger => {
|
||||||
|
trigger.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const content = this.nextElementSibling;
|
||||||
|
const icon = this.querySelector('.accordion-icon');
|
||||||
|
|
||||||
|
if (content && content.classList.contains('accordion-content')) {
|
||||||
|
// 切换当前项
|
||||||
|
if (content.classList.contains('open')) {
|
||||||
|
content.classList.remove('open');
|
||||||
|
if (icon) icon.classList.remove('rotated');
|
||||||
|
} else {
|
||||||
|
content.classList.add('open');
|
||||||
|
if (icon) icon.classList.add('rotated');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 点击菜单内链接后关闭菜单
|
||||||
|
document.querySelectorAll('#mobile-menu-panel a').forEach(link => {
|
||||||
|
link.addEventListener('click', function() {
|
||||||
|
if (!this.nextElementSibling || !this.nextElementSibling.classList.contains('accordion-content')) {
|
||||||
|
closeMobileMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ESC键关闭菜单
|
||||||
|
document.addEventListener('keydown', function(e) {
|
||||||
|
if (e.key === 'Escape' && mobileMenuPanel.classList.contains('active')) {
|
||||||
|
closeMobileMenu();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
if (targetId === '#') return;
|
||||||
|
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
e.preventDefault();
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetElement.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回顶部按钮
|
||||||
|
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>
|
||||||
BIN
Binary file not shown.
@@ -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: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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-darkerBg text-gray-200 min-h-screen flex flex-col">
|
||||||
|
<!-- 导航栏（页眉） -->
|
||||||
|
<header id="navbar"
|
||||||
|
class="fixed w-full top-0 z-50 transition-all duration-300 bg-darkBg/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-gray-300 hover:text-white transition-colors">首页</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 产品中心 -->
|
||||||
|
<div class="relative group nav-mega-menu">
|
||||||
|
<a
|
||||||
|
class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-white 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-darkCard/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-gray-700">
|
||||||
|
<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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item cursor-pointer border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-sm font-medium text-gray-300 group-hover/item:text-white">RISC-V处理器IP</span>
|
||||||
|
<i
|
||||||
|
class="fa fa-chevron-right mt-2 text-xs text-gray-500 group-hover/item:text-white transition-colors"></i>
|
||||||
|
</a>
|
||||||
|
<!-- 三级菜单 - 三列布局 -->
|
||||||
|
<div
|
||||||
|
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-darkCard rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-[420px] border border-gray-700">
|
||||||
|
<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-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M050</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130/"
|
||||||
|
class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M130</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m510/"
|
||||||
|
class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M510</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-a500/"
|
||||||
|
class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white 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-gray-300 hover:bg-white/10 hover:text-white 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-gray-300 hover:bg-white/10 hover:text-white rounded transition-colors">Wing-M050S</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130s/"
|
||||||
|
class="block py-2 px-3 text-xs text-gray-300 hover:bg-white/10 hover:text-white 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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-sm font-medium text-gray-300 group-hover/item:text-white">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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-sm font-medium text-gray-300 group-hover/item:text-white">智翼端侧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-gray-300 hover:text-white 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-darkCard/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-gray-700">
|
||||||
|
<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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item cursor-pointer border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-sm font-medium text-gray-300 group-hover/item:text-white">IP相关技术</span>
|
||||||
|
<i
|
||||||
|
class="fa fa-chevron-right mt-2 text-xs text-gray-500 group-hover/item:text-white transition-colors"></i>
|
||||||
|
</a>
|
||||||
|
<!-- 三级菜单 -->
|
||||||
|
<div
|
||||||
|
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-darkCard rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-56 border border-gray-700">
|
||||||
|
<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-gray-300 hover:bg-white/10 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-compress mr-3 text-gray-400"></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-gray-300 hover:bg-white/10 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-bolt mr-3 text-gray-400"></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-gray-800/50 hover:bg-gray-700/50 transition-all duration-300 text-center group/item border border-gray-700/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-gray-300 group-hover/item:text-white"></i>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-sm font-medium text-gray-300 group-hover/item:text-white">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-gray-300 hover:text-white 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-gray-300 hover:text-white 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-gray-300 hover:text-white 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-darkCard to-darkerBg border-t border-gray-700/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-gray-300 hover:text-white 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-gray-300 hover:text-white 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-white/5 hover:bg-white/10 text-gray-400 hover:text-white 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-gray-700/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-gray-300 hover:text-white rounded-lg hover:bg-white/5 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-white/5 hover:bg-white/10 text-gray-400 hover:text-white 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-gray-700/30">
|
||||||
|
<!-- 通用处理器IP -->
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between py-2 px-3 text-sm text-gray-400 hover:text-white rounded-lg hover:bg-white/5 transition-all">
|
||||||
|
<span>通用处理器IP</span>
|
||||||
|
<button type="button"
|
||||||
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-white/5 text-gray-500 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white rounded-lg hover:bg-white/5 transition-all">
|
||||||
|
<span>车规处理器IP</span>
|
||||||
|
<button type="button"
|
||||||
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-white/5 text-gray-500 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white rounded-lg hover:bg-white/5 transition-all">
|
||||||
|
<span>安全处理器IP</span>
|
||||||
|
<button type="button"
|
||||||
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-white/5 text-gray-500 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-300 hover:text-white hover:bg-white/5 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-gray-300 hover:text-white hover:bg-white/5 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-gray-300 hover:text-white 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-white/5 hover:bg-white/10 text-gray-400 hover:text-white 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-gray-700/50">
|
||||||
|
<!-- IP相关技术二级菜单 -->
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-between py-2.5 px-3 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 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-white/5 hover:bg-white/10 text-gray-400 hover:text-white 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-gray-700/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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-300 hover:text-white hover:bg-white/5 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-gray-300 hover:text-white 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-gray-300 hover:text-white 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-gray-700/50">
|
||||||
|
<a href="https://www.beiyuxing.live/position/"
|
||||||
|
class="flex items-center justify-center py-3 px-4 text-sm font-semibold text-white 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-darkerBg text-white py-16 border-t border-gray-800">
|
||||||
|
<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-gray-400 mb-6">
|
||||||
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具。
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-weixin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-weibo"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white 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-gray-400 hover:text-white transition-colors">公司简介</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/position/"
|
||||||
|
class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/news/"
|
||||||
|
class="text-gray-400 hover:text-white transition-colors">新闻动态</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
||||||
|
© <span id="current-year">2023</span> 隼瞻科技. 保留所有权利.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">隐私政策</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">使用条款</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 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>
|
||||||
@@ -0,0 +1,939 @@
|
|||||||
|
<!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: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submenu-level-3 {
|
||||||
|
z-index: 9999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
/* ========== WordPress 样式覆盖 ========== */
|
||||||
|
/* 重置联系我们区域的所有 p 标签样式 */
|
||||||
|
.contact-section p,
|
||||||
|
.contact-section p.text-gray-400,
|
||||||
|
.contact-section .text-gray-400 {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保所有文本容器内的 p 标签紧凑 */
|
||||||
|
.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: #1e293b;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #475569;
|
||||||
|
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: #fff;
|
||||||
|
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(3, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info-card h3 {
|
||||||
|
margin: 0 0 8px 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
|
||||||
|
<!-- 导航栏（页眉） -->
|
||||||
|
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-darkBg/70 backdrop-blur-sm shadow-md">
|
||||||
|
<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">
|
||||||
|
<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-gray-300 hover:text-primary transition-colors">首页</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative group">
|
||||||
|
<a class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-primary transition-colors flex items-center">
|
||||||
|
产品中心
|
||||||
|
<i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
||||||
|
</a>
|
||||||
|
<div class="absolute left-0 mt-2 w-64 bg-darkCard rounded-md shadow-lg overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100 z-50 border border-gray-700">
|
||||||
|
<div class="relative dropdown-submenu">
|
||||||
|
<a class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary w-full text-left flex items-center justify-between">
|
||||||
|
RISC-V处理器IP
|
||||||
|
<i class="fa fa-chevron-right ml-2 text-xs transition-transform"></i>
|
||||||
|
</a>
|
||||||
|
<div class="submenu submenu-level-3 absolute left-full top-0 ml-1 bg-darkCard rounded-md shadow-xl overflow-hidden opacity-0 invisible transition-all duration-300 w-96 border border-gray-700">
|
||||||
|
<div class="grid grid-cols-3 gap-1 p-3">
|
||||||
|
<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/elementor-%e9%a1%b5%e9%9d%a2-626/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M050</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-1885/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M130</a>
|
||||||
|
<a href="products.html#wing-m510" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M510</a>
|
||||||
|
<a href="products.html#wing-a500" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-A500</a>
|
||||||
|
<a href="products.html#wing-a700" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-A700</a>
|
||||||
|
</div>
|
||||||
|
<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="products.html#wing-m050a" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M050A</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1890/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M130A</a>
|
||||||
|
<a href="products.html#wing-m510a" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M510A</a>
|
||||||
|
</div>
|
||||||
|
<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/elementor-%e9%a1%b5%e9%9d%a2-1821/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M050S</a>
|
||||||
|
<a href="https://www.beiyuxing.live/wing-m130s%e5%ae%89%e5%85%a8%e6%a0%b8/" class="block py-2 px-3 text-xs text-gray-300 hover:bg-primary/10 hover:text-primary rounded transition-colors">Wing-M130S</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1465/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">ArchitStudio开发平台</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1442/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">智翼端侧AI解决方案</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1524/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">配套开发工具</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1532/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">FPGA</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative group">
|
||||||
|
<a class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-primary transition-colors flex items-center">
|
||||||
|
技术中心
|
||||||
|
<i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
||||||
|
</a>
|
||||||
|
<div class="absolute left-0 mt-2 w-48 bg-darkCard rounded-md shadow-lg overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-left scale-95 group-hover:scale-100 z-50 border border-gray-700">
|
||||||
|
<div class="relative dropdown-submenu">
|
||||||
|
<a class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary w-full text-left flex items-center justify-between">
|
||||||
|
IP相关技术
|
||||||
|
<i class="fa fa-chevron-right ml-2 text-xs transition-transform"></i>
|
||||||
|
</a>
|
||||||
|
<div class="submenu submenu-level-3 absolute left-full top-0 ml-1 bg-darkCard rounded-md shadow-xl overflow-hidden opacity-0 invisible transition-all duration-300 w-48 border border-gray-700">
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1490/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">代码压缩技术</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1473/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">中断实时性技术</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/" class="block px-4 py-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary transition-colors">AI融合技术</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative group">
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-683/" class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-primary transition-colors">新闻中心</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative group">
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-725/" class="py-2 px-1 text-sm font-medium text-gray-300 hover:text-primary transition-colors">关于我们</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1173/" class="block py-2 px-3 text-sm font-medium text-white bg-primary rounded-md text-center hover:bg-primary/90 hover:text-white transition-colors">加入我们</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="tablet:hidden">
|
||||||
|
<button id="mobile-menu-button" type="button" class="text-gray-300 hover:text-primary transition-colors focus:outline-none">
|
||||||
|
<i class="fa fa-bars text-xl"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端导航菜单 -->
|
||||||
|
<div id="mobile-menu" class="tablet:hidden hidden bg-darkCard border-t border-gray-700">
|
||||||
|
<div class="container mx-auto px-4 py-3 space-y-1">
|
||||||
|
<a href="https://www.beiyuxing.live/" class="block py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">首页</a>
|
||||||
|
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<a class="flex-1">产品中心</a>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1">
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<a class="flex-1">RISC-V处理器IP</a>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1">
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<span class="flex-1">通用处理器IP</span>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1 bg-darkerBg">
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-626/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M050</a>
|
||||||
|
<a href="products.html#wing-m130" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M130</a>
|
||||||
|
<a href="products.html#wing-m510" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M510</a>
|
||||||
|
<a href="products.html#wing-a500" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-A500</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<span class="flex-1">车规处理器IP</span>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1 bg-darkerBg">
|
||||||
|
<a href="products.html#wing-m050a" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M050A</a>
|
||||||
|
<a href="products.html#wing-m130a" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M130A</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<span class="flex-1">安全处理器IP</span>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1 bg-darkerBg">
|
||||||
|
<a href="products.html#wing-m050s" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M050S</a>
|
||||||
|
<a href="products.html#wing-m130s" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">Wing-M130S</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1465/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">ArchitStudio开发平台</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1442/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">智翼端侧AI解决方案</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1524/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">配套开发工具</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1532/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">FPGA</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<span class="flex-1">技术中心</span>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1">
|
||||||
|
<div class="mobile-dropdown">
|
||||||
|
<div class="w-full flex items-center justify-between py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">
|
||||||
|
<span class="flex-1">IP相关技术</span>
|
||||||
|
<button type="button" class="mobile-dropdown-toggle text-gray-400 hover:text-primary focus:outline-none" aria-label="展开菜单">
|
||||||
|
<i class="fa fa-chevron-down text-xs transition-transform"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="mobile-dropdown-menu hidden pl-6 space-y-1 bg-darkerBg">
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1490/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">代码压缩技术</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1473/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">中断实时性技术</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/" class="block py-2 px-3 text-sm text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">AI融合技术</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-683/" class="block py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">新闻中心</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-725/" class="block py-2 px-3 text-sm font-medium text-gray-300 hover:bg-primary/10 hover:text-primary rounded-md">关于我们</a>
|
||||||
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1173/" class="block py-2 px-3 text-sm font-medium text-white bg-primary rounded-md text-center hover:bg-primary/90 hover:text-white transition-colors">加入我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<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-white" style="margin-bottom: 24px !important;">联系我们</h2>
|
||||||
|
<p class="section-desc text-gray-400 max-w-2xl mx-auto" style="margin: 0 auto !important;">
|
||||||
|
如果您想了解更多关于我们的产品和服务，或者有任何合作意向，欢迎随时与我们联系
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="bg-darkCard p-8 rounded-xl shadow-lg border border-gray-700">
|
||||||
|
<!-- 联系信息区域 -->
|
||||||
|
<div class="contact-info-grid mb-8 pb-8 border-b border-gray-700">
|
||||||
|
<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-base font-semibold text-white" style="margin: 0 0 8px 0 !important;">热线电话</h3>
|
||||||
|
<p class="text-gray-400 text-sm" style="margin: 0 !important; line-height: 1.6 !important;">025-58181916</p>
|
||||||
|
<p class="text-gray-400 text-sm" 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-envelope-o text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold text-white" style="margin: 0 0 8px 0 !important;">电子邮箱</h3>
|
||||||
|
<p class="text-gray-400 text-sm" style="margin: 0 !important; line-height: 1.6 !important;">business@wingsemitech.com</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-base font-semibold text-white" style="margin: 0 0 8px 0 !important;">商务代表</h3>
|
||||||
|
<p class="text-gray-400 text-sm" style="margin: 0 !important; line-height: 1.6 !important;">Jack 吴 | 17372837832</p>
|
||||||
|
<p class="text-gray-400 text-sm" 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-white 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-gray-700 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-white text-base" style="margin: 0 !important;">广州市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">上海市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">深圳市</h4>
|
||||||
|
<p class="text-gray-400 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-gray-700 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-white text-base" style="margin: 0 !important;">珠海市</h4>
|
||||||
|
<p class="text-gray-400 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-white 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>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-darkerBg text-white py-16 border-t border-gray-800">
|
||||||
|
<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">
|
||||||
|
<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-gray-400 mb-6">
|
||||||
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具。
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-weixin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-weibo"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<i class="fa fa-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="text-gray-400 hover:text-white 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/elementor-%e9%a1%b5%e9%9d%a2-1465/" class="text-gray-400 hover:text-white transition-colors">ArchitStudio开发平台</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1442/" class="text-gray-400 hover:text-white transition-colors">智翼端侧AI解决方案</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1524/" class="text-gray-400 hover:text-white transition-colors">配套开发工具</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1532/" class="text-gray-400 hover:text-white transition-colors">FPGA</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-gray-400 hover:text-white transition-colors">AI融合技术</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1490/" class="text-gray-400 hover:text-white transition-colors">代码压缩技术</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1473/" class="text-gray-400 hover:text-white 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/elementor-%e9%a1%b5%e9%9d%a2-725/" class="text-gray-400 hover:text-white transition-colors">公司简介</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1173/" class="text-gray-400 hover:text-white transition-colors">加入我们</a></li>
|
||||||
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-683/" class="text-gray-400 hover:text-white transition-colors">新闻动态</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">
|
||||||
|
© <span id="current-year">2023</span> 隼瞻科技. 保留所有权利.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">隐私政策</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors">使用条款</a>
|
||||||
|
<a href="#" class="text-gray-500 hover:text-gray-400 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>
|
||||||
|
(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 initMenu() {
|
||||||
|
// 导航栏滚动效果
|
||||||
|
var navbar = document.getElementById('navbar');
|
||||||
|
var backToTop = document.getElementById('back-to-top');
|
||||||
|
|
||||||
|
if (navbar) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端菜单按钮
|
||||||
|
var mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||||
|
var mobileMenu = document.getElementById('mobile-menu');
|
||||||
|
|
||||||
|
if (mobileMenuButton && mobileMenu) {
|
||||||
|
mobileMenuButton.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
mobileMenu.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端下拉菜单
|
||||||
|
var mobileDropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
|
||||||
|
|
||||||
|
mobileDropdownToggles.forEach(function(toggle) {
|
||||||
|
toggle.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
var dropdown = this.closest('.mobile-dropdown');
|
||||||
|
var menu = dropdown.querySelector('.mobile-dropdown-menu');
|
||||||
|
var icon = this.querySelector('i');
|
||||||
|
|
||||||
|
if (menu) {
|
||||||
|
menu.classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
if (icon) {
|
||||||
|
icon.classList.toggle('rotate-180');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回顶部按钮
|
||||||
|
if (backToTop) {
|
||||||
|
backToTop.addEventListener('click', function() {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置当前年份
|
||||||
|
var currentYear = document.getElementById('current-year');
|
||||||
|
if (currentYear) {
|
||||||
|
currentYear.textContent = new Date().getFullYear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化地址卡片
|
||||||
|
initAddressCards();
|
||||||
|
|
||||||
|
// 初始化默认地图
|
||||||
|
initDefaultMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确保DOM加载完成后执行
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', initMenu);
|
||||||
|
} else {
|
||||||
|
initMenu();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+493
@@ -0,0 +1,493 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>隼瞻科技 - 专用处理器IP和EDA设计平台提供商</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: '#165DFF',
|
||||||
|
secondary: '#0E42D2',
|
||||||
|
accent: '#69b1ff',
|
||||||
|
dark: '#0f172a',
|
||||||
|
light: '#f8fafc',
|
||||||
|
darkBg: '#1e293b',
|
||||||
|
darkerBg: '#0f172a',
|
||||||
|
darkCard: '#334155'
|
||||||
|
},
|
||||||
|
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.3);
|
||||||
|
}
|
||||||
|
.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");
|
||||||
|
}
|
||||||
|
/* 滚动动画 */
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
/* 数值计数动画 */
|
||||||
|
.count-up {
|
||||||
|
transition: all 0.8s ease-out;
|
||||||
|
}
|
||||||
|
/* 卡片悬停效果 */
|
||||||
|
.hover-float {
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
.hover-float:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
/* 按钮波纹效果 */
|
||||||
|
.ripple {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.ripple:active:after {
|
||||||
|
transform: scale(0, 0);
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: 0s;
|
||||||
|
}
|
||||||
|
/* 平滑背景渐变动画 */
|
||||||
|
@keyframes gradientFlow {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
.gradient-animate {
|
||||||
|
background-size: 200% 200%;
|
||||||
|
animation: gradientFlow 15s ease infinite;
|
||||||
|
}
|
||||||
|
/* 脉冲动画 */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.05); }
|
||||||
|
}
|
||||||
|
.animate-pulse-slow {
|
||||||
|
animation: pulse 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
|
||||||
|
|
||||||
|
<!-- 首页Hero区域 -->
|
||||||
|
<section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-darkBg to-darkerBg gradient-animate overflow-hidden relative">
|
||||||
|
<div class="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
|
||||||
|
<div class="w-full h-full bg-[url('https://picsum.photos/id/1/1200/800')] bg-cover bg-center"></div>
|
||||||
|
</div>
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
||||||
|
<div class="max-w-3xl mx-auto text-center mb-12 md:mb-16">
|
||||||
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-6">
|
||||||
|
专用处理器IP与<br/>
|
||||||
|
<span class="text-primary">EDA设计平台</span>
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||||
|
隼瞻科技专注于提供高性能、低功耗的专用处理器IP和先进的EDA设计平台，助力客户加速芯片设计创新
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<a href="#products" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-lg hover:shadow-xl font-medium text-lg ripple animate-pulse-slow">
|
||||||
|
探索产品
|
||||||
|
</a>
|
||||||
|
<a href="#services" class="px-8 py-3 bg-darkCard text-gray-200 border border-gray-600 rounded-lg hover:bg-darkCard/80 hover:border-primary/50 transition-colors shadow-md hover:shadow-lg font-medium text-lg ripple">
|
||||||
|
了解服务
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center">
|
||||||
|
<div class="w-full max-w-5xl rounded-xl overflow-hidden shadow-2xl border border-gray-700 bg-darkCard">
|
||||||
|
<img src="https://picsum.photos/id/20/1920/1080" alt="处理器IP和EDA设计平台" class="w-full h-auto object-cover"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 产品介绍部分 -->
|
||||||
|
<section id="products" class="py-16 md:py-24 bg-darkBg relative">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-12 md:mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">核心产品</h2>
|
||||||
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
||||||
|
我们提供高性能、低功耗的处理器IP和ArchitStudio开发平台，满足各种应用场景的需求
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 产品卡片 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<!-- 处理器IP卡片 -->
|
||||||
|
<div id="processor-ip" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in">
|
||||||
|
<div class="relative overflow-hidden h-48">
|
||||||
|
<img src="https://picsum.photos/id/96/600/400" alt="处理器IP" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||||
|
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-microchip text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-white">处理器IP</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 mb-4">
|
||||||
|
高性能、低功耗的处理器IP核，支持RISC-V、ARM等多种架构，适用于从嵌入式到高性能计算的广泛应用场景。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">支持RISC-V指令集扩展</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">可配置的缓存和管道深度</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">低功耗设计，适用于移动设备</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- EDA设计平台卡片 -->
|
||||||
|
<div id="eda-platforms" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in" style="transition-delay: 0.1s">
|
||||||
|
<div class="relative overflow-hidden h-48">
|
||||||
|
<img src="https://picsum.photos/id/180/600/400" alt="EDA设计平台" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||||
|
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-code-fork text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-white">ArchitStudio开发平台</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 mb-4">
|
||||||
|
先进的EDA设计平台，提供从系统级到物理级的完整设计流程支持，加速芯片设计和验证过程。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">完整的芯片设计流程支持</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">高效的仿真和验证工具</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">自动化的布局布线解决方案</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 软件开发工具卡片 -->
|
||||||
|
<div id="software-tools" class="group bg-darkCard rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden hover-float animate-fade-in" style="transition-delay: 0.2s">
|
||||||
|
<div class="relative overflow-hidden h-48">
|
||||||
|
<img src="https://picsum.photos/id/0/600/400" alt="软件开发工具" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
|
||||||
|
<a href="products.html" class="px-4 py-2 bg-white text-primary rounded-md text-sm font-medium hover:bg-primary hover:text-white transition-colors">查看详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<i class="fa fa-code text-primary text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-white">智翼端侧AI解决方案</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-300 mb-4">
|
||||||
|
集成高性能处理器、专用AI加速器和丰富的开发工具，为物联网、工业控制、智能驾驶等场景提供低功耗、高性能的AI计算能力。
|
||||||
|
</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">优化的编译器和工具链</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">集成开发环境支持</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-sm">
|
||||||
|
<i class="fa fa-check text-green-400 mr-2"></i>
|
||||||
|
<span class="text-gray-300">实时性能分析工具</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 定制服务部分 -->
|
||||||
|
<section id="services" class="py-16 md:py-24 bg-darkerBg">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<div class="text-center mb-12 md:mb-16">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">技术中心</h2>
|
||||||
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
||||||
|
我们提供全方位的定制服务，满足客户的特殊需求，帮助客户快速实现产品创新
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务卡片 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<!-- IP相关技术 -->
|
||||||
|
<div id="custom-design" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in">
|
||||||
|
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<i class="fa fa-microchip text-primary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-white">代码压缩技术</h3>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
用廉价的、大容量的存储空间来换取昂贵的、高性能的片上存储空间和系统带宽的节省。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
|
||||||
|
了解更多
|
||||||
|
<i class="fa fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中断实时性技术 -->
|
||||||
|
<div id="ip-integration" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in" style="transition-delay: 0.1s">
|
||||||
|
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<i class="fa fa-puzzle-piece text-primary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-white">中断实时性技术</h3>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
中断实时性技术的核心在于最大限度地降低中断响应延迟，确保系统在关键时刻能够做出及时且可靠的反应。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
|
||||||
|
了解更多
|
||||||
|
<i class="fa fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 技术支持 -->
|
||||||
|
<div id="technical-support" class="bg-darkCard p-8 rounded-xl border border-gray-700 shadow-md hover:shadow-xl transition-shadow duration-300 hover-float animate-fade-in" style="transition-delay: 0.2s">
|
||||||
|
<div class="w-16 h-16 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
|
||||||
|
<i class="fa fa-life-ring text-primary text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold mb-4 text-white">AI融合技术</h3>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
实现高性能、低功耗的智能计算解决方案，为边缘计算和嵌入式系统赋能。
|
||||||
|
</p>
|
||||||
|
<a href="#contact" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors">
|
||||||
|
了解更多
|
||||||
|
<i class="fa fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 关于我们部分 -->
|
||||||
|
<section id="about" class="py-16 md:py-24 bg-darkBg">
|
||||||
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
||||||
|
<div id="company-profile" class="grid md:grid-cols-2 gap-12 items-center mb-20">
|
||||||
|
<div class="animate-fade-in">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">关于隼瞻科技</h2>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，由一群在半导体行业拥有丰富经验的专家创立。我们致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具，帮助客户加速芯片设计创新，降低开发成本，缩短产品上市时间。
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-300 mb-6">
|
||||||
|
我们的团队由来自国内外知名半导体公司的资深工程师组成，拥有丰富的处理器设计、EDA工具开发和芯片验证经验。我们秉承"创新、卓越、协作、共赢"的核心价值观，不断追求技术创新，为客户创造价值。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-6 mt-8">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-1 count-up">50</div>
|
||||||
|
<div class="text-sm text-gray-400">专业工程师</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-1 count-up">100</div>
|
||||||
|
<div class="text-sm text-gray-400">合作伙伴</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-1 count-up">20</div>
|
||||||
|
<div class="text-sm text-gray-400">核心IP产品</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-1 count-up">5</div>
|
||||||
|
<div class="text-sm text-gray-400">行业解决方案</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="relative animate-fade-in" style="transition-delay: 0.2s">
|
||||||
|
<div class="absolute -top-4 -left-4 w-24 h-24 bg-primary/10 rounded-lg -z-10"></div>
|
||||||
|
<div class="absolute -bottom-4 -right-4 w-24 h-24 bg-primary/10 rounded-lg -z-10"></div>
|
||||||
|
<img src="https://picsum.photos/id/28/800/600" alt="隼瞻科技团队" class="w-full h-auto rounded-xl shadow-xl"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 返回顶部按钮 -->
|
||||||
|
<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>
|
||||||
|
// 返回顶部按钮控制
|
||||||
|
const backToTop = document.getElementById('back-to-top');
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
backToTop.classList.remove('opacity-0', 'invisible');
|
||||||
|
backToTop.classList.add('opacity-100', 'visible');
|
||||||
|
} else {
|
||||||
|
backToTop.classList.add('opacity-0', 'invisible');
|
||||||
|
backToTop.classList.remove('opacity-100', 'visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetElement.offsetTop - 80,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回顶部按钮
|
||||||
|
backToTop.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 滚动动画
|
||||||
|
const animateOnScroll = () => {
|
||||||
|
const elements = document.querySelectorAll('.animate-fade-in');
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const elementVisible = 100; // 减小触发阈值，使元素更容易触发动画
|
||||||
|
|
||||||
|
elements.forEach(element => {
|
||||||
|
const elementPosition = element.getBoundingClientRect().top;
|
||||||
|
if (elementPosition < windowHeight - elementVisible) {
|
||||||
|
element.classList.add('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 数值计数动画
|
||||||
|
const stats = document.querySelectorAll('.count-up');
|
||||||
|
stats.forEach(stat => {
|
||||||
|
const statPosition = stat.getBoundingClientRect().top;
|
||||||
|
const statBottom = stat.getBoundingClientRect().bottom;
|
||||||
|
|
||||||
|
// 当元素进入视口时触发动画
|
||||||
|
if (statPosition < windowHeight - elementVisible && !stat.classList.contains('counted')) {
|
||||||
|
// 获取原始数值（存储为数据属性以便重置）
|
||||||
|
if (!stat.dataset.originalValue) {
|
||||||
|
const targetText = stat.innerText;
|
||||||
|
let target = 0;
|
||||||
|
try {
|
||||||
|
// 提取所有数字字符并转换为整数
|
||||||
|
const numericPart = targetText.replace(/[^0-9]/g, '');
|
||||||
|
target = parseInt(numericPart);
|
||||||
|
stat.dataset.originalValue = target;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('无法解析数值:', targetText, e);
|
||||||
|
target = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const target = parseInt(stat.dataset.originalValue);
|
||||||
|
let count = 0;
|
||||||
|
const duration = 2000; // 动画持续时间（毫秒）
|
||||||
|
const increment = target / (duration / 16); // 每16ms增加的值
|
||||||
|
|
||||||
|
const updateCount = () => {
|
||||||
|
count += increment;
|
||||||
|
if (count < target) {
|
||||||
|
stat.innerText = Math.ceil(count) + '+';
|
||||||
|
requestAnimationFrame(updateCount);
|
||||||
|
} else {
|
||||||
|
stat.innerText = target + '+';
|
||||||
|
stat.classList.add('counted');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCount();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当元素完全离开视口时重置动画状态，允许重新触发
|
||||||
|
if (statBottom < 0) {
|
||||||
|
if (stat.dataset.originalValue) {
|
||||||
|
stat.innerText = stat.dataset.originalValue;
|
||||||
|
}
|
||||||
|
stat.classList.remove('counted');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面加载时检查一次
|
||||||
|
window.addEventListener('load', animateOnScroll);
|
||||||
|
// 滚动时检查
|
||||||
|
window.addEventListener('scroll', animateOnScroll);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1491
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,407 @@
|
|||||||
|
<!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: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#165DFF', /* 隼瞻科技蓝 */
|
||||||
|
secondary: '#36CFC9', /* 辅助青色 */
|
||||||
|
accent: '#F7BA1E', /* 强调色 */
|
||||||
|
dark: '#111827', /* 统一底色 */
|
||||||
|
darker: '#0b1220',
|
||||||
|
'dark-card': '#1f2937',
|
||||||
|
'dark-text': '#94A3B8',
|
||||||
|
'code-bg': '#1e1e1e',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
||||||
|
mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
'glow': '0 0 20px rgba(22, 93, 255, 0.3)',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style type="text/tailwindcss">
|
||||||
|
@layer utilities {
|
||||||
|
.text-gradient {
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.section-padding {
|
||||||
|
@apply py-16 md:py-24;
|
||||||
|
}
|
||||||
|
.card-hover {
|
||||||
|
@apply transition-all duration-300 hover:translate-y-[-5px] hover:shadow-lg hover:shadow-primary/20;
|
||||||
|
}
|
||||||
|
/* 模拟代码高亮颜色 */
|
||||||
|
.token-keyword { color: #C586C0; }
|
||||||
|
.token-reg { color: #9CDCFE; }
|
||||||
|
.token-val { color: #B5CEA8; }
|
||||||
|
.token-comment { color: #6A9955; }
|
||||||
|
.token-instr { color: #DCDCAA; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
/* WordPress 兼容性样式 - 确保字体颜色不被覆盖 */
|
||||||
|
#wingsemi-interrupt-page,
|
||||||
|
#wingsemi-interrupt-page * {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page {
|
||||||
|
background-color: #0b1220 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-white {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-dark-text {
|
||||||
|
color: #94A3B8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-gray-400 {
|
||||||
|
color: #9ca3af !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-gray-500 {
|
||||||
|
color: #6b7280 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-primary {
|
||||||
|
color: #165DFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page .text-secondary {
|
||||||
|
color: #36CFC9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page h1,
|
||||||
|
#wingsemi-interrupt-page h2,
|
||||||
|
#wingsemi-interrupt-page h3,
|
||||||
|
#wingsemi-interrupt-page h4,
|
||||||
|
#wingsemi-interrupt-page h5,
|
||||||
|
#wingsemi-interrupt-page h6 {
|
||||||
|
color: #ffffff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wingsemi-interrupt-page p {
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-darker text-white font-sans antialiased">
|
||||||
|
<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-white font-bold 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-white font-medium rounded-lg transition-all cursor-pointer">
|
||||||
|
了解指令集优化
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
|
||||||
|
<section id="instruction-optimization" class="section-padding bg-dark">
|
||||||
|
<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="bg-dark-card 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-gray-400">常规 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="bg-dark-card 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-white">隼瞻增强技术</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-white 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-darker 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-white">中断发起<br>跳转时间</div>
|
||||||
|
<div class="bg-primary/80 py-3 px-1 w-1/2 rounded-r-lg text-white">向量中断、缩短<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="bg-dark-card 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-gray-400">常规中断处理</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-white font-bold">隼瞻实时性增强技术</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-dark">
|
||||||
|
<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-white font-bold">中断时延的确定性</span> 和 <span class="text-white font-bold">响应中断的及时性</span></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
<!-- 左侧：绝对时间优势 -->
|
||||||
|
<div class="bg-dark-card 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-gray-400 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-gray-400 text-sm">中断响应周期大幅缩减</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧：时间确定性 (Jitter对比) -->
|
||||||
|
<div class="bg-dark-card 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-gray-400 mb-2">隼瞻中断实时性技术</div>
|
||||||
|
<div class="flex gap-1 h-12">
|
||||||
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-white font-bold text-xs shadow-lg">10 Cycle</div>
|
||||||
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-white font-bold text-xs shadow-lg">12 Cycle</div>
|
||||||
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-white font-bold 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-gray-400 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-gray-400 text-xs">24 Cycle</div>
|
||||||
|
<div class="w-1/2 bg-gray-700 h-full rounded flex items-center justify-center text-gray-400 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-white font-bold 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('.bg-dark-card, h2, h3');
|
||||||
|
elements.forEach(el => {
|
||||||
|
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+349
@@ -0,0 +1,349 @@
|
|||||||
|
<!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: '#1e293b',
|
||||||
|
darkerBg: '#0a0f1a',
|
||||||
|
darkCard: '#151e2e',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
inter: ['Inter', 'sans-serif'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background: #0a0f1a;
|
||||||
|
color: #e2e8f0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 网格背景 */
|
||||||
|
.grid-bg {
|
||||||
|
position: fixed;
|
||||||
|
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: 40px 40px;
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 产品卡片特效 */
|
||||||
|
.model-card {
|
||||||
|
background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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.5);
|
||||||
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.15);
|
||||||
|
background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-card:hover .icon-wrapper {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-wrapper {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渐变文本 */
|
||||||
|
.gradient-text {
|
||||||
|
background: linear-gradient(135deg, #60a5fa 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">
|
||||||
|
|
||||||
|
<div class="grid-bg"></div>
|
||||||
|
|
||||||
|
<!-- 顶部导航占位 (可替换为您原有的header) -->
|
||||||
|
<header class="border-b border-white/10 bg-darkerBg/80 backdrop-blur-md 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-white hover:text-primary transition-colors">
|
||||||
|
<i class="fa fa-arrow-left"></i>
|
||||||
|
<span class="font-semibold">返回首页</span>
|
||||||
|
</a>
|
||||||
|
<div class="text-gray-300 font-medium">处理器 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/20 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-white mb-6">
|
||||||
|
完整的 <span class="gradient-text">处理器 IP</span> 货架集群
|
||||||
|
</h1>
|
||||||
|
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
|
||||||
|
点击具体型号，深入了解从超低功耗嵌入式到全场景数字算力的详细架构与技术规格。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 主体货架展示区 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-24 pb-24">
|
||||||
|
|
||||||
|
<!-- ================= CPU IP 板块 ================= -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center justify-between mb-8 pb-4 border-b border-white/10">
|
||||||
|
<h2 class="text-3xl font-bold text-white category-header border-primary">CPU IP (RISC-V 架构)</h2>
|
||||||
|
<span class="px-4 py-1.5 rounded-full bg-blue-500/10 text-blue-400 text-sm font-medium border border-blue-500/20">Wing-M & Wing-A 系列</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid lg:grid-cols-2 gap-12">
|
||||||
|
<!-- Wing-M 系列 (量产型/专用小核/中核) -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-emerald-400 mb-6 flex items-center">
|
||||||
|
<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">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-M050</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-battery-empty"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">量产型小核，完美替代 Cortex-M0/M0+，极小面积与超低功耗设计。</p>
|
||||||
|
<div class="text-emerald-400 text-sm font-medium flex items-center">查看详情 <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-emerald-500/30">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-M050s</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-shield"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">专用加密安全小核，面向汽车电子及高安全特性需求。</p>
|
||||||
|
<div class="text-emerald-400 text-sm font-medium flex items-center">查看详情 <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">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-M130</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-emerald-500/20 text-emerald-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-tachometer"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">通用中核，高性能嵌入式处理器，服务于通信、工控及存储等领域。</p>
|
||||||
|
<div class="text-emerald-400 text-sm font-medium flex items-center">查看详情 <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">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-M130A</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-teal-500/20 text-teal-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-music"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">在 M130 基础上增强 DSP 计算能力，适配轻量音频与信号处理。</p>
|
||||||
|
<div class="text-emerald-400 text-sm font-medium flex items-center">查看详情 <i class="fa fa-angle-right ml-2 group-hover:translate-x-1 transition-transform"></i></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wing-A 系列 (通用大核) -->
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold text-blue-400 mb-6 flex items-center">
|
||||||
|
<i class="fa fa-rocket mr-3"></i> Wing-A 系列 (通用大核/应用级)
|
||||||
|
</h3>
|
||||||
|
<div class="grid sm:grid-cols-2 gap-5 h-[calc(100%-3rem)]">
|
||||||
|
<a href="Wing-A500.html" class="model-card p-6 rounded-xl group">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-A500</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-laptop"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">支持 RVA23 规范的双发射9级流水线大核，覆盖 AP 与端侧 AI。</p>
|
||||||
|
<div class="text-blue-400 text-sm font-medium flex items-center mt-auto">查看详情 <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">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-A700</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-indigo-500/20 text-indigo-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-server"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">更高性能的 64 位多核强劲算力引擎，专为高性能服务器及大算力平台设计。</p>
|
||||||
|
<div class="text-indigo-400 text-sm font-medium flex items-center mt-auto">查看详情 <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>
|
||||||
|
<div class="flex items-center justify-between mb-8 pb-4 border-b border-white/10">
|
||||||
|
<h2 class="text-3xl font-bold text-white category-header !border-cyan-500">DSP IP (信号与矢量处理)</h2>
|
||||||
|
<span class="px-4 py-1.5 rounded-full bg-cyan-500/10 text-cyan-400 text-sm font-medium border border-cyan-500/20">Wing-D 系列</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
|
||||||
|
<a href="#" class="model-card p-6 rounded-xl group border-cyan-500/20">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-D200</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-cyan-500/20 text-cyan-400 flex items-center justify-center">
|
||||||
|
<i class="fa fa-wifi"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">专用矢量处理器，聚焦 5G 通信核心场景与高频信号处理。</p>
|
||||||
|
<div class="text-cyan-400 text-sm font-medium flex items-center">探索设备 <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-xl group border-cyan-500/20">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<h4 class="text-lg font-bold text-white">Wing-D400-VL</h4>
|
||||||
|
<div class="icon-wrapper w-8 h-8 rounded-lg bg-cyan-600/20 text-cyan-500 flex items-center justify-center">
|
||||||
|
<i class="fa fa-headphones"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-4 flex-grow">强化版矢量处理器，同时完美适配轻量级 AI 运算与 HIFI 音频处理。</p>
|
||||||
|
<div class="text-cyan-400 text-sm font-medium flex items-center">探索设备 <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-6 rounded-xl bg-gradient-to-br from-cyan-900/20 to-transparent border border-cyan-500/10 flex flex-col justify-center">
|
||||||
|
<h4 class="text-lg font-bold text-white mb-2 flex items-center"><i class="fa fa-crosshairs text-cyan-500 mr-2"></i> 精准高效的专用架构</h4>
|
||||||
|
<p class="text-sm text-gray-400 leading-relaxed">
|
||||||
|
基于独特的指令集与数据路径融合设计，Wing-D 系列在 5G 基带运算、复杂音频降噪以及特定轻量级网络推理上，相比通用核心能大幅降低功耗并提高吞吐量，为通信与声学领域提供极致的算力支撑。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ================= NPU IP 板块 ================= -->
|
||||||
|
<section>
|
||||||
|
<div class="flex items-center justify-between mb-8 pb-4 border-b border-white/10">
|
||||||
|
<h2 class="text-3xl font-bold text-white category-header !border-purple-500">NPU IP (神经网络处理器)</h2>
|
||||||
|
<span class="px-4 py-1.5 rounded-full bg-purple-500/10 text-purple-400 text-sm font-medium border border-purple-500/20">Wing-N / P / M 系列</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid sm:grid-cols-3 gap-6">
|
||||||
|
<!-- 端侧 -->
|
||||||
|
<a href="#" class="model-card p-6 rounded-xl group border-purple-500/20">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-bold text-purple-400 uppercase tracking-wider mb-1 block">端侧 AI</span>
|
||||||
|
<h4 class="text-xl font-bold text-white">0 - 4T 算力</h4>
|
||||||
|
</div>
|
||||||
|
<div class="icon-wrapper w-10 h-10 rounded-xl bg-purple-500/20 text-purple-400 flex items-center justify-center text-xl">
|
||||||
|
<i class="fa fa-cogs"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-6 flex-grow">
|
||||||
|
覆盖各类 IoT 设备、智能家居、可穿戴设备。极低待机功耗，支持实时唤醒与本地小模型推理。
|
||||||
|
</p>
|
||||||
|
<div class="pt-4 border-t border-white/5 text-purple-400 text-sm font-medium flex items-center font-mono">
|
||||||
|
Wing-M 系列 <i class="fa fa-angle-right ml-auto group-hover:translate-x-1 transition-transform"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 边缘侧 -->
|
||||||
|
<a href="#" class="model-card p-6 rounded-xl group border-fuchsia-500/20">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-bold text-fuchsia-400 uppercase tracking-wider mb-1 block">边缘 AI</span>
|
||||||
|
<h4 class="text-xl font-bold text-white">4 - 64T 算力</h4>
|
||||||
|
</div>
|
||||||
|
<div class="icon-wrapper w-10 h-10 rounded-xl bg-fuchsia-500/20 text-fuchsia-400 flex items-center justify-center text-xl">
|
||||||
|
<i class="fa fa-car"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-6 flex-grow">
|
||||||
|
适用于智能汽车、安防监控前端、服务器边缘端节点。提供极高能效比的大规模张量加速。
|
||||||
|
</p>
|
||||||
|
<div class="pt-4 border-t border-white/5 text-fuchsia-400 text-sm font-medium flex items-center font-mono">
|
||||||
|
Wing-P 系列 <i class="fa fa-angle-right ml-auto group-hover:translate-x-1 transition-transform"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 云端 -->
|
||||||
|
<a href="#" class="model-card p-6 rounded-xl group border-pink-500/20">
|
||||||
|
<div class="flex justify-between items-start mb-6">
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-bold text-pink-400 uppercase tracking-wider mb-1 block">云端 AI</span>
|
||||||
|
<h4 class="text-xl font-bold text-white">> 200T 算力</h4>
|
||||||
|
</div>
|
||||||
|
<div class="icon-wrapper w-10 h-10 rounded-xl bg-pink-500/20 text-pink-400 flex items-center justify-center text-xl">
|
||||||
|
<i class="fa fa-cloud"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-400 mb-6 flex-grow">
|
||||||
|
针对大数据平台、服务器集群与大模型训练/推理定制，具备高度可扩展的多芯多卡级联能力。
|
||||||
|
</p>
|
||||||
|
<div class="pt-4 border-t border-white/5 text-pink-400 text-sm font-medium flex items-center font-mono">
|
||||||
|
Wing-N 系列 <i class="fa fa-angle-right ml-auto group-hover:translate-x-1 transition-transform"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
const Database = require('better-sqlite3');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const dbPath = path.join(__dirname, 'database.sqlite');
|
||||||
|
const db = new Database(dbPath);
|
||||||
|
|
||||||
|
// Initialize tables
|
||||||
|
db.exec(`
|
||||||
|
CREATE TABLE IF NOT EXISTS documents (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
title TEXT NOT NULL,
|
||||||
|
original_path TEXT NOT NULL,
|
||||||
|
processed_path TEXT NOT NULL,
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS users (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
username TEXT UNIQUE NOT NULL,
|
||||||
|
password TEXT NOT NULL
|
||||||
|
);
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Create default admin user if not exists
|
||||||
|
// The password here is a hash for "123456"
|
||||||
|
const checkUser = db.prepare('SELECT * FROM users WHERE username = ?').get('admin');
|
||||||
|
if (!checkUser) {
|
||||||
|
const bcrypt = require('bcryptjs');
|
||||||
|
const salt = bcrypt.genSaltSync(10);
|
||||||
|
const hash = bcrypt.hashSync('123456', salt);
|
||||||
|
db.prepare('INSERT INTO users (username, password) VALUES (?, ?)').run('admin', hash);
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = db;
|
||||||
Binary file not shown.
+16
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||||
|
|
||||||
|
case `uname` in
|
||||||
|
*CYGWIN*|*MINGW*|*MSYS*)
|
||||||
|
if command -v cygpath > /dev/null 2>&1; then
|
||||||
|
basedir=`cygpath -w "$basedir"`
|
||||||
|
fi
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
if [ -x "$basedir/node" ]; then
|
||||||
|
exec "$basedir/node" "$basedir/../bcryptjs/bin/bcrypt" "$@"
|
||||||
|
else
|
||||||
|
exec node "$basedir/../bcryptjs/bin/bcrypt" "$@"
|
||||||
|
fi
|
||||||
+17
@@ -0,0 +1,17 @@
|
|||||||
|
@ECHO off
|
||||||
|
GOTO start
|
||||||
|
:find_dp0
|
||||||
|
SET dp0=%~dp0
|
||||||
|
EXIT /b
|
||||||
|
:start
|
||||||
|
SETLOCAL
|
||||||
|
CALL :find_dp0
|
||||||
|
|
||||||
|
IF EXIST "%dp0%\node.exe" (
|
||||||
|
SET "_prog=%dp0%\node.exe"
|
||||||
|
) ELSE (
|
||||||
|
SET "_prog=node"
|
||||||
|
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||||
|
)
|
||||||
|
|
||||||
|
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\bcryptjs\bin\bcrypt" %*
|
||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
#!/usr/bin/env pwsh
|
||||||
|
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||||
|
|
||||||
|
$exe=""
|
||||||
|
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||||
|
# Fix case when both the Windows and Linux builds of Node
|
||||||
|
# are installed in the same directory
|
||||||
|
$exe=".exe"
|
||||||
|
}
|
||||||
|
$ret=0
|
||||||
|
if (Test-Path "$basedir/node$exe") {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "$basedir/node$exe" "$basedir/../bcryptjs/bin/bcrypt" $args
|
||||||
|
} else {
|
||||||
|
& "$basedir/node$exe" "$basedir/../bcryptjs/bin/bcrypt" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
} else {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "node$exe" "$basedir/../bcryptjs/bin/bcrypt" $args
|
||||||
|
} else {
|
||||||
|
& "node$exe" "$basedir/../bcryptjs/bin/bcrypt" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
}
|
||||||
|
exit $ret
|
||||||
+16
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||||
|
|
||||||
|
case `uname` in
|
||||||
|
*CYGWIN*|*MINGW*|*MSYS*)
|
||||||
|
if command -v cygpath > /dev/null 2>&1; then
|
||||||
|
basedir=`cygpath -w "$basedir"`
|
||||||
|
fi
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
if [ -x "$basedir/node" ]; then
|
||||||
|
exec "$basedir/node" "$basedir/../prebuild-install/bin.js" "$@"
|
||||||
|
else
|
||||||
|
exec node "$basedir/../prebuild-install/bin.js" "$@"
|
||||||
|
fi
|
||||||
+17
@@ -0,0 +1,17 @@
|
|||||||
|
@ECHO off
|
||||||
|
GOTO start
|
||||||
|
:find_dp0
|
||||||
|
SET dp0=%~dp0
|
||||||
|
EXIT /b
|
||||||
|
:start
|
||||||
|
SETLOCAL
|
||||||
|
CALL :find_dp0
|
||||||
|
|
||||||
|
IF EXIST "%dp0%\node.exe" (
|
||||||
|
SET "_prog=%dp0%\node.exe"
|
||||||
|
) ELSE (
|
||||||
|
SET "_prog=node"
|
||||||
|
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||||
|
)
|
||||||
|
|
||||||
|
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\prebuild-install\bin.js" %*
|
||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
#!/usr/bin/env pwsh
|
||||||
|
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||||
|
|
||||||
|
$exe=""
|
||||||
|
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||||
|
# Fix case when both the Windows and Linux builds of Node
|
||||||
|
# are installed in the same directory
|
||||||
|
$exe=".exe"
|
||||||
|
}
|
||||||
|
$ret=0
|
||||||
|
if (Test-Path "$basedir/node$exe") {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "$basedir/node$exe" "$basedir/../prebuild-install/bin.js" $args
|
||||||
|
} else {
|
||||||
|
& "$basedir/node$exe" "$basedir/../prebuild-install/bin.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
} else {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "node$exe" "$basedir/../prebuild-install/bin.js" $args
|
||||||
|
} else {
|
||||||
|
& "node$exe" "$basedir/../prebuild-install/bin.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
}
|
||||||
|
exit $ret
|
||||||
+16
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||||
|
|
||||||
|
case `uname` in
|
||||||
|
*CYGWIN*|*MINGW*|*MSYS*)
|
||||||
|
if command -v cygpath > /dev/null 2>&1; then
|
||||||
|
basedir=`cygpath -w "$basedir"`
|
||||||
|
fi
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
if [ -x "$basedir/node" ]; then
|
||||||
|
exec "$basedir/node" "$basedir/../rc/cli.js" "$@"
|
||||||
|
else
|
||||||
|
exec node "$basedir/../rc/cli.js" "$@"
|
||||||
|
fi
|
||||||
+17
@@ -0,0 +1,17 @@
|
|||||||
|
@ECHO off
|
||||||
|
GOTO start
|
||||||
|
:find_dp0
|
||||||
|
SET dp0=%~dp0
|
||||||
|
EXIT /b
|
||||||
|
:start
|
||||||
|
SETLOCAL
|
||||||
|
CALL :find_dp0
|
||||||
|
|
||||||
|
IF EXIST "%dp0%\node.exe" (
|
||||||
|
SET "_prog=%dp0%\node.exe"
|
||||||
|
) ELSE (
|
||||||
|
SET "_prog=node"
|
||||||
|
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||||
|
)
|
||||||
|
|
||||||
|
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\rc\cli.js" %*
|
||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
#!/usr/bin/env pwsh
|
||||||
|
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||||
|
|
||||||
|
$exe=""
|
||||||
|
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||||
|
# Fix case when both the Windows and Linux builds of Node
|
||||||
|
# are installed in the same directory
|
||||||
|
$exe=".exe"
|
||||||
|
}
|
||||||
|
$ret=0
|
||||||
|
if (Test-Path "$basedir/node$exe") {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "$basedir/node$exe" "$basedir/../rc/cli.js" $args
|
||||||
|
} else {
|
||||||
|
& "$basedir/node$exe" "$basedir/../rc/cli.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
} else {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "node$exe" "$basedir/../rc/cli.js" $args
|
||||||
|
} else {
|
||||||
|
& "node$exe" "$basedir/../rc/cli.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
}
|
||||||
|
exit $ret
|
||||||
+16
@@ -0,0 +1,16 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
||||||
|
|
||||||
|
case `uname` in
|
||||||
|
*CYGWIN*|*MINGW*|*MSYS*)
|
||||||
|
if command -v cygpath > /dev/null 2>&1; then
|
||||||
|
basedir=`cygpath -w "$basedir"`
|
||||||
|
fi
|
||||||
|
;;
|
||||||
|
esac
|
||||||
|
|
||||||
|
if [ -x "$basedir/node" ]; then
|
||||||
|
exec "$basedir/node" "$basedir/../semver/bin/semver.js" "$@"
|
||||||
|
else
|
||||||
|
exec node "$basedir/../semver/bin/semver.js" "$@"
|
||||||
|
fi
|
||||||
+17
@@ -0,0 +1,17 @@
|
|||||||
|
@ECHO off
|
||||||
|
GOTO start
|
||||||
|
:find_dp0
|
||||||
|
SET dp0=%~dp0
|
||||||
|
EXIT /b
|
||||||
|
:start
|
||||||
|
SETLOCAL
|
||||||
|
CALL :find_dp0
|
||||||
|
|
||||||
|
IF EXIST "%dp0%\node.exe" (
|
||||||
|
SET "_prog=%dp0%\node.exe"
|
||||||
|
) ELSE (
|
||||||
|
SET "_prog=node"
|
||||||
|
SET PATHEXT=%PATHEXT:;.JS;=;%
|
||||||
|
)
|
||||||
|
|
||||||
|
endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\semver\bin\semver.js" %*
|
||||||
+28
@@ -0,0 +1,28 @@
|
|||||||
|
#!/usr/bin/env pwsh
|
||||||
|
$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
|
||||||
|
|
||||||
|
$exe=""
|
||||||
|
if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
|
||||||
|
# Fix case when both the Windows and Linux builds of Node
|
||||||
|
# are installed in the same directory
|
||||||
|
$exe=".exe"
|
||||||
|
}
|
||||||
|
$ret=0
|
||||||
|
if (Test-Path "$basedir/node$exe") {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "$basedir/node$exe" "$basedir/../semver/bin/semver.js" $args
|
||||||
|
} else {
|
||||||
|
& "$basedir/node$exe" "$basedir/../semver/bin/semver.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
} else {
|
||||||
|
# Support pipeline input
|
||||||
|
if ($MyInvocation.ExpectingInput) {
|
||||||
|
$input | & "node$exe" "$basedir/../semver/bin/semver.js" $args
|
||||||
|
} else {
|
||||||
|
& "node$exe" "$basedir/../semver/bin/semver.js" $args
|
||||||
|
}
|
||||||
|
$ret=$LASTEXITCODE
|
||||||
|
}
|
||||||
|
exit $ret
|
||||||
+1553
File diff suppressed because it is too large
Load Diff
+21
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 Andrew Dillon
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
+83
@@ -0,0 +1,83 @@
|
|||||||
|
<h1>
|
||||||
|
standard-fonts
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<!-- NPM Version -->
|
||||||
|
<a href="https://www.npmjs.com/package/standard-fonts">
|
||||||
|
<img
|
||||||
|
src="https://img.shields.io/npm/v/@pdf-lib/standard-fonts.svg?style=flat-square"
|
||||||
|
alt="NPM Version"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Prettier Badge -->
|
||||||
|
<a href="https://prettier.io/">
|
||||||
|
<img
|
||||||
|
src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
|
||||||
|
alt="Prettier Badge"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
> Collection of metrics and encodings for the standard 14 PDF fonts
|
||||||
|
|
||||||
|
This project is a fork of [`afm`](https://github.com/chbrown/afm) and was created for use in [`pdf-lib`](https://github.com/Hopding/pdf-lib). This forks exists for two primary reasons:
|
||||||
|
|
||||||
|
1. The original project did not include mappings from Unicode to WinAnsi/ZapfDingbats/Symbol encodings.
|
||||||
|
2. The font metrics included in the original project were uncompressed (not ideal for usage in `pdf-lib`).
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
```js
|
||||||
|
import { Font, FontNames, Encodings } from '@pdf-lib/standard-fonts';
|
||||||
|
|
||||||
|
const codePoint = '∑'.charCodeAt(0);
|
||||||
|
|
||||||
|
const glyph = Encodings.Symbol.encodeUnicodeCodePoint(codePoint);
|
||||||
|
glyph // => { code: 229, name: 'summation' }
|
||||||
|
|
||||||
|
const font = Font.load(FontNames.Symbol);
|
||||||
|
const width = font.getWidthOfGlyph(glyph.name);
|
||||||
|
width // => 713
|
||||||
|
```
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
### NPM Module
|
||||||
|
To install the latest stable version:
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install --save @pdf-lib/standard-fonts
|
||||||
|
|
||||||
|
# With yarn
|
||||||
|
yarn add @pdf-lib/standard-fonts
|
||||||
|
```
|
||||||
|
This assumes you're using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/) as your package manager.
|
||||||
|
|
||||||
|
### UMD Module
|
||||||
|
You can also download `@pdf-lib/standard-fonts` as a UMD module from [unpkg](https://unpkg.com/#/). The UMD builds have been compiled to ES5, so they should work [in any modern browser](https://caniuse.com/#feat=es5). UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the `<script>` tag of an HTML page.
|
||||||
|
|
||||||
|
The following builds are available:
|
||||||
|
|
||||||
|
* https://unpkg.com/@pdf-lib/standard-fonts/dist/standard-fonts.js
|
||||||
|
* https://unpkg.com/@pdf-lib/standard-fonts/dist/standard-fonts.min.js
|
||||||
|
|
||||||
|
When using a UMD build, you will have access to a global `window.StandardFonts` variable. This variable contains the classes and enums exported by `@pdf-lib/standard-fonts`. For example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// NPM module
|
||||||
|
import { Font, FontNames, Encodings } from '@pdf-lib/standard-fonts';
|
||||||
|
const font = Font.load(FontNames.HelveticaBold);
|
||||||
|
const encoding = Encodings.WinAnsi;
|
||||||
|
|
||||||
|
// UMD module
|
||||||
|
var font = StandardFonts.Font.load(StandardFonts.FontNames.HelveticaBold);
|
||||||
|
var encoding = StandardFonts.Encodings.WinAnsi;
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
[MIT](https://choosealicense.com/licenses/mit/)
|
||||||
|
|
||||||
|
## Original Repo's License
|
||||||
|
|
||||||
|
Copyright 2015–2018 Christopher Brown.
|
||||||
|
[MIT Licensed](https://chbrown.github.io/licenses/MIT/#2015-2018).
|
||||||
Generated
Vendored
+7023
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtyGjkQ/RVqnnar8Bb4lpg3jEnCxgEvGDtxKg9iphm01oyILrZxKv++mrGd3az6KC8UnNa0+nrUGr5lI11VVLtskF198FaU1Dns9w9OOkf7/ePDrJu90bWbiorCgpH2RpLZO9WqaCReqZ8lnReJqKTa/SwL8DXJctPs9Lxs4oSS+bAuVVjXC7/tG/lAxYV0+SYbOOOpm402wojckVlQ8+T4wVFdUDHXlaifrTs91Q/Z4PNeMLu7t3/U6746POm+7vW/dLNlWGuUrOlCW+mkrrPBXr/X+4/gciPz25qszQbhyeyKjG2XZb3ewR+9Xi/sMdVO5k+ebHemcaHzW/57p3/y+qQbPk967We//TxoP191hoVeUWexs44q25nUuTZbbYSj4o9OZ6hUZ97osZ05WTJ3AQ37jMOqQtblIt9QG7lWycKJuhCmeJGGhSOxffccyqPj/W728eXX4cFJNxvavAmRyQbH++HnGf34vdc/etXNFq54d50NXh+2X6/C137v+CnQH8gZmYdQfP6WXX8MCppQTYMlditCBL53/wfTQ65EFeNfvQ6erlQsqX21akJc1rGs0EoJE+NbMnlToZFAVEFkQ3iABW2uGH3CUK1ojUTgMWEbjfaWeUp5G6N5aCwRw5vddkOM98EVqRlPrBJ2E8OPZHSM6prJkrtnVrqNIWbtOjQrg8o7Zq2VDwxId5x3xMe0lpzBuVaa0WGpkkCkmgaON/3qBVODpaHQiIybXz3ZliTi3DO2D2PoNIZGMXQWQ+MYehNDb2PoXQxNYujPGHofQ+cx9CGGpjE0i6GLGPorhuYxtIihyxhaxtBVDF3H0McY+hRDNzG0CqfQLTmeNlZBBvr0+TnIKbmUuTS5Z1jUN6xtw8nBtEjLb7wxDOesmB5j+JfpIIYLmIZiWC6GZAz9HUMMvTItzESL6VqG9rZMKGOI4QaGXpjY+xi6i6H7GGKYdMeQPl9foBBW3GHark9Vo5OqgEd9oe+ZOPOnc3NcqmZgiUuomehYnt1xZ8daaSPZ8wBoyb0Jx3jOBLBtGyvbiRNOLXw0Sy+DpNKAAhpxq/gXYhD6NdMda6bwwyTH0kwhypI70p5wdhR7Gjia3JEhpvfDLCRKI7YcqYXJnxgv/g3vSthEhNNSEKIfCQByUkpurWQaNXjqNtqjSfHp0OdLOwSAG31E7h03uLRMvlbEtDPoq0rkhqvhlSFu40I7kfP9VoRLFrH+G7YLcypCQLkJ1delML5SwjPb6DIMmQxL54L1gyq+YIfMyKNNsQ4zHj8UnoMDdoZwfoMqkJxX7A6Cj3czWzLdqcC+GuGM9tCa4RobSp5J2gTnk0D5CVA0Pp1RAqn7hC0o5J3kqvkTsGyY6gwBHlqmHtqBh2x77UI9QimVS75PljgMAjXDEljn0QNjvMlZIAju/pF0NH95VcFshSgnB3Ug+LhMkwYoVKOAUS+T2kZIG2DVcYInLXDTQkKUYHelH6kuGcEcbPE26aRPNklKOEQpNcCQHPp6k4jc5UYbRtkM7T4HcVsAvADWLtEGnq/M9t2G9e2Aw8xEM1CCQ4QDWq28cnKrmDHTAwcvgYNh1HJSqEKumdvVDlPDFOwjU8UyTpZZ4tTBohzYUSMaRAmdggBNgKLmzVsYGLjXbyujb6lm70CGSmnB1PsWJHuSYhQfupq/ioxBTRngkEaRuQEP3ICIPb/kAq/Axo6ZUEaQFFSStxwa/eDpiARDND4kqhIE+BG1Btp7hjKCjh6UKYt2xk7MkmMJ8PCMlGNy5XiSdvc6wYjYtIp5pSGBRTo9Z45R6Asw4bQ8HgrYhEJmTFsk6pWvyPfJOj4HiXNGFFQJw1hOCVaYgChNUOGcA6tD0DZCMSdDczMBDa5TFVWDqWn5i/yB+BByqARcGhx6ziqXVD4Ii2TqZmnLi8AS3L8dGqRoBIzwkM0LmXNpOAOKTNKbKciPBvg8XdZJ6RDoHEKO5meuGdDzmOiQMTrt0d63SVfAIDBJtgIwwaUvN7ps8l1r7v0I5lKPRUEV+rcqfaHlDvJH4FSdVBVCjk8IiXp87Jv/Ib90s/dk6gshTfPv8Zfv/wDUfBK2"
|
||||||
pdf-preview-site/backend/node_modules/@pdf-lib/standard-fonts/es/Courier-BoldOblique.compressed.json
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtyGjkQ/RVqnnarcAo7vuE3jEnCxgEvGDtxKg9iRgxaa0ZEF9s4lX/fnrGdTVZ9lBcKTmvU96PW8C0bmqqStc9OsqsPwYlSdnaPDvb6naP+3v5+1s3emNpPRCVpwdAEq6TdOTW6mC61+hpksyBo/euCTrOg89MKUSm9/XUNwddSletGcbOcfo+90Cof1KWmdTu7e4S4N+pBFhfK5+vsxNsgu9lwLazIvbRz2Tw7evCyLmQxM5Won809PTUP2cnnnYOj7s7eQa97fNjvHvd2v3SzBS21WtXywjjllakbRb3eT4LLtcpva+lcdkJPZlfSunZZ1uu9ftXr9UjFxHiVP7my2drGh84f+Z+d3f5xv0uf/V77udt+vm4/jzqDwixlZ751XlauM65zYzfGCi+LV53OQOvOrNnHdWbSSXtHKOkZ0apC1eU8X8s2dO0mcy/qQtjiRUoLh2Lz7jmWB4cUto8vv/Zf97vZwOVNhGx2crhHP8/kj987uxShbO6Ld9fZyfF++/WKvu72Dp/i/EF6q3IKxedv2fVH2qAJ1YQscRtBEfje/R8sH3Itqhj/Ggx5utSxpA7VsglxWceywmgtbIxvpM2bio0EoiKRo/AAC9pcMfsJK2stV0gEHhOu2dHdMk/p4GI0p0YTMbzebtaS8Z5cUYbxxGnh1jH8KK2JUVMzWfL3zEq/tpJZu6JuZVB1x6x16oEB5R3nneRjWivO4Nxow+zhZKWASDcNHCv9GgRTg6WV1IiMm8ReriWJOPeM7YMYOo2hYQydxdAoht7E0NsYehdD4xj6K4bex9B5DH2IoUkMTWPoIob+jqFZDM1j6DKGFjF0FUPXMfQxhj7F0E0MLekQupWep40lyUCfPj8HOSVXKlc2DwyLhoa1HZ0cTIu0/MYbw3DOkukxhn+ZDmK4gGkohuViSMXQPzHE0CvTwky0mK5laG/DhDKGGG5g6IWJfYihuxi6jyGGSbcM6fP1BQphyR2m7fpUNXqlC3jUF+aeiTN/OjfHpW4GlriEmoGO5dktd3astLGKPQ/ALnmwdIznTADbtnGqHTnh1MJHswyKJJUBFNCI241/IwahXzHdsWIKnyY5lmYKUZbckfaEs6PY08DR5E5ayfQ+zUKitGLDkRpdASTjxX/hXQqXiHBaCkL0IwFALrVWG6eYRiVP/doENCk+Hfp8aVMAuNFH5MFzg0vL5CstmXYGfVWJ3HI1vLSSU1wYL3K+3wq6ZUnWf8t2YS4LCig3oYa6FDZUWgRGjSlpyGRYOhesH7LiC3bAjDzGFiua8fih8BwcsFOE8woqIrmgWQ2Cj3czWzLdqYFeg3Bmd2pNusVSyTNJG+N8SlB+AhRNSGdUgtR9whYU6k5x1fwJWDZIdYYADy1SD23BQ669dqEekaktF3yfLHAYBGqGBbAuoAdGWMkZEQR3/0g6mr+8qmBUIcrJQR0IPi6TpAEa1Shg1MvkbkO0G2DVUYInHXDTQUJUQLs2j7IuGcEMqHibdDIkmyQlHKCUWmBIDn29SUTucm0ss9kUaZ+BuM0BXgBrF0hB4CuzfbfhQjvgMDPRFJTgAOGAVqugvdpoZswMwMFL4CCNWl4JXagVc7vaYmqYAD0qVSyjZJklTh0syoEdNaJBlNAJCNAYbNS8eaOBgXv9trTmVtbsHcjKUjkw9b4FyR6nGCVQV/NXkRGoKQscMigyN+CBGxCx55dc4BXYyDMTyhCSgk7ylkejHzwdkWCAxodEVYIAP6LWQLqnKCPo6EGZckgzdmKaHEuAh2dSeyZXnidpf28SjIhNq5hXGgpYZNJz5giFvgATTsvjVMCWCpkxbZ6oV74i3yfr+BwkzltRyEpYxnKZYIUxiNIYFc45sJqCthaaORmamwlocJOqqBpMTYvf5A/ERyKHSsCl5NBzVrmk8kGYJ1M3TVteEEtw/3YYkKIhMCJANi9UzqXhDGxkk95MQH4MwGfpsk5KB2DPAeRofuaagn0eEx0yQqc90n2bdAUMAuNkKwATfPpyY8om37Xh3o9gLg1YRFuhf6vSF1ruIH8ETtXJrSjk+IRQqMdHofkf8ks3ey9tfSGUbf49/vL9XxrnGMA="
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWVtT2zgU/isZP+3OhE5Iy/UtDaHNFhI2IdDS4UGxFUeLbKW6AKHT/77Hhnbb1fnUFw98x9K5fzpyvmZDU1Wy9tlxdnUenChlZ3e//+awc7B32D/Kutmpqf1EVJJeGJpglbQ706VWX4JshEHrX4Wdn4SiUnr7q5jga6nKdaPvXBYqVISMvdAqH9Slpjd3dvuEuFP1KIsL5fN1duxtkN1suBZW5F7auWxWjx69rAtZzEwl6hc73741j9nx553+QXenv9frHr456h729m672YJetVrV8sI45ZWpG0W93k+Cy7XK72rpXHZMK7MraV37WtbrvX7V6/VIxcR4lT87s9naxovOH/mfnd2jw6MuPY967XO3ffbb5+v2edAZFGYpO/Ot87JynXGdG7sxVnhZvOp0Blp3Zs1urjOTTtp7QknbiN4qVF3O87VsQ9huMveiLoQtvkvpxaHYvH+J6d4+Be/j9//e9Pe72cDlTZxsdrzfP+pmJ/LH/zu7ewfdbO6L99e0crf98+rlzybY59JblVM8Pn/Nrj/S+iZeEzLEbQSF4Vv3f7B8zLWoYvxLMOToUseSOlTLJs5lHcsKo7WwMb6RNm/qNRKIikSOogMsaBPG7CesrLVcIRFYJlyzo7tjVungYjSnNhMxvN5u1pLxnlxRhvHEaeHWMfwkrYlRUzNZ8g/Mm35tJfPuipqWQdU9865Tjwwo7znvJB/TWnEG50YbZg8nKwVEuuniWOmXIJgaLK2kPmTcJBJzLVPEuWdsH8TQ2xgaxtBJDI1i6DSG3sXQ+xgax9BfMfQhhs5i6DyGJjE0jaGLGPo7hmYxNI+hyxhaxNBVDF3H0McY+hRDNzG0pJPoTnqeNpYkA336sg5ySq5UrmweGBYNDWk7OjiYFmn5jTeG4Zwl02MM/zIdxHAB01AMy8WQiqF/YoihV6aFmWgxXcvQ3oYJZQwx3MDQCxP7EEP3MfQQQwyTbhnS5+sLFMKSO0zb91PV6JUu4FFfmAcmzvzp3ByXuplX4hJqpjqWZ7fc2bHSxir2PAC75MHSMZ4zAWzbxql27oRTCx/NMiiSVAZQQCNuN/6NGIR+xXTHiil8GuRYmilEWXJH2jPOjmLPA0eTO2kl0/s0C4nSig1HanQJkIwX/4V3KVwiwmkpCNGPBAC51FptnGIalTz1axPQpPh86POlTQHgRh+RB88NLi2Tr7Rk2hn0VSVyy9Xw0kpOcWG8yPl+K+iyJVn/LduFOV3GaOBmuDvUpbCh0iIwakxJQybD0rlg/ZAVX7ADZuQxtljRjMcPhWfggJ0inFdQEckFzWoQfLyb2ZLpTg30GoQzu1Nr0lWWSp5J2hjnU4LyE6BoQjqjEqTuE7agUPeKq+ZPwLJBqjMEWLRILdqCRa69dqEekaktF3yfLHAYBGqGBbAuoAUjrOSECIK7fyQdzb9/r2BUIcrJQR0IPi6TpAEa1Shg1MvkbkO0G2DVUYInHXDTQUJUQLs2T7IuGcEMqHiXdDIkmyQlHKCUWmBIDn29SUTucm0ss9kUaZ+BuM0BXgBrF0hB4Cuz/bbhQjvgMDPRFJTgAOGAVqugvdpoZswMwMFL4CCNWl4JXagVc7vaYmqYAD0qVSyjZJklTh0syoEdNaJBlNAJCNAYbNR8eaOBgfv8trTmTtbsHcjKUjkw9b4DyR6nGCVQV/NXkRGoKQscMigyN2DBDYjYy0cu8Als5JkJZQhJQSd5y6PRD56OSDBA40OiKkGAn1BrIN1TlBF09KBMOaQZOzFNjiXAwxOpPZMrz5O0fzAJRsSmVcwnDQUsMuk5c4RCX4AJp+VxKmBLhcyYNk/UK1+RH5J1fAYS560oZCUsY7lMsMIYRGmMCucMWE1BWwvNnAzNzQQ0uElVVA2mpsVv8gfiI5FDJeBScuglq1xS+SDMk6mbpi0viCW4XzsMSNEQGBEgmxcq59JwAjaySW8mID8G4LN0WSelA7DnAHI0P3NNwT5PiQ4ZodMe6b5LugIGgXGyFYAJPn25MWWT79pw30cwlwYsoq3Qr1XpCy13kD8Bp+rkVhRyfEIo1OOj0PwOedvNPkhbXwhlm1+Pb7/9C/NFF2U="
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtSGzkQ/RXXPO1WmZSBEAJvjnESb8AmGENCKg+ypj3Wohk5ugAmlX9fzUCyW6s+ysuUfVqXvh61Zr4XI1PX1PjiuLg6C05U1Ns/Ojx42TsYHB4eFf3irWn8VNQUB4xMsIpsCwatU1DUSm8T+JpUtW7XP6NShToiEy+0ksOm0nHkIP53b9UDlefKy3Vx7G2gfjFaCyukJzundu74wVNTUnlhatE8a/XmjXkojr/s7O33d/YOBv3D3YP+68HB136xiEOtVg2dG6e8Mk1xvLM7GPxHcLlW8rYh54rjOLO4Iuu6YcVgsP9iMBjELabGK/lkymZrWxt6f8g/e7tHr4/68Xk06J673XOve+53z8PesDRL6s23zlPtepNGGrsxVngqX/R6Q617F+1qrndBjuxdRONu4ziqVE01l2vqHNgtMveiKYUtf0rjwJHYvH/26MGrvX7x6ee/l3uv+sXQydZPtjh+tXfUL07o1/+d3YPDfjH35fvrOHO3+3n1/LN19hl5q2T0x5fvxfWnOL/11zQq4jYiuuFH/38wPUgt6hT/Fkw0dKlTSRPqZevnqkllpdFa2BTfkJVtdiYCUUeRi94BGnQBY9YTlhpNKyQC04RrV3S3zCwdXIrKWFQihdfbzZoY66MpyjCWOC3cOoUfyZoUNQ0TJX/PjPRrS8zYVSxZBlV3zFinHhiQ7jjriPdpoziFpdGGWcNRrYBIt1WcbvotCCYHK0uxDhkzvwVyHVOksWd0H6bQmxQapdBJCo1T6G0KvUuh9yk0SaG/UuhDCp2m0FkKTVNolkLnKfQxhS5SaJ5Clym0SKGrFLpOoU8p9DmFblJoGU+iW/I8bSyjDNTp8zzIKVIpqawMDIuGlrRdPDiYEun4jVeG4ZwlU2MM/zIVxHABU1AMy6WQSqG/U4ihV6aEGW8xVcvQ3oZxZQox3MDQC+P7kEJ3KXSfQgyTbhnS5/MLJMKSO0y78bls9EqX8KgvzT3jZ/50bo9L3fYraQq1XR3Ls1vu7FhpYxV7HoBVZLDxGJeMA7uycarrOmHXwnuzCipKagMooBV3C/9GDFy/YqpjxSR+bORYmilFVXFH2hPOtmJPDUcbO7LE1H7shURlxYYjtdj6E2PFv+5dCpfxcF4KXPQrAEBOWquNU0yhRkv92gTUKT4d+nxqRwdwrY+QwXONS8fkK01MOYO6qoW0XA4vLXEbl8YLyddbGa9axNpv2SqU8SoWG26Gu0NTCRtqLQKzjalik8mwtBSsHVTzCTtkWh5jy1Xs8fim8BQcsDOE8xvUkeSCZncQvL/b3pKpTg32NQhnVo+lGa+yMeWZoE1wPAmknwBJE/IRJRC6z1iDUt0pLps/A82GucoQYNIiN2kLJrnu2oVqhHJLLvg6WWA3CFQMC6BdQBPGeJOTSBDc/SNrqPz5voLZClGOBHkgeL9MswpolKOAUS+zq43QaoBVxxmedMBMBwlRgd21eaSmYgQXYIt3WSNDtkhywiEKqQWKSGjrTcZzl2tjmcVmaPcL4Lc5wEug7QJtEPjM7N5tuNA1OExPNAMpOEQ4oNU6aK82mmkzAzDwEhgYWy2vhC7VirldbTE1TME+Kpcs42yaZU4dLJJAjwbRIAroFDhoAhZq37zFhoF7/ba05pYa9g5kqVIOdL3vQLAnOUYJsar5q8gY5JQFBhnkmRsw4QZ47PklF3gFNvZMhzKCpKCzvOVR6wdPRyQYovYhk5XAwY+oNNDeMxQRdPSgSDm0MzZilm1LgIUnpD0TK8+TtL83GUbEqtXMKw0FNDL5PnOMXF+CDqfj8ZjANiYyo9o8k698Rn7I5vEpCJy3oqRaWEZzyrDCBHhpghLnFGgdnbYWmjkZ2psJKHCTy6gGdE2L38QP+IeQQRXg0mjQc1S5oPJOmGdDN8trXkaW4L52GBCiEVAiQDYvleTCcAIWsllrpiA+BuAX+bTOSodgzSHkaL7nmoF1HjMVMkanPdr7NmsKaAQm2VIAKvj85cZUbbwbw70fwVwasCguhb5W5S+03EH+CIxqsktFl+MTQqEaH4f2O+TXfvGBbHMulG2/Hn/98Q/b2xEO"
|
||||||
+24
@@ -0,0 +1,24 @@
|
|||||||
|
declare type EncodingCharCode = number;
|
||||||
|
declare type EncodingCharName = string;
|
||||||
|
interface UnicodeMappings {
|
||||||
|
[unicodeCodePoint: number]: [EncodingCharCode, EncodingCharName];
|
||||||
|
}
|
||||||
|
declare type EncodingNames = 'Symbol' | 'ZapfDingbats' | 'WinAnsi';
|
||||||
|
declare class Encoding {
|
||||||
|
name: EncodingNames;
|
||||||
|
supportedCodePoints: number[];
|
||||||
|
private unicodeMappings;
|
||||||
|
constructor(name: EncodingNames, unicodeMappings: UnicodeMappings);
|
||||||
|
canEncodeUnicodeCodePoint: (codePoint: number) => boolean;
|
||||||
|
encodeUnicodeCodePoint: (codePoint: number) => {
|
||||||
|
code: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export declare type EncodingType = Encoding;
|
||||||
|
export declare const Encodings: {
|
||||||
|
Symbol: Encoding;
|
||||||
|
ZapfDingbats: Encoding;
|
||||||
|
WinAnsi: Encoding;
|
||||||
|
};
|
||||||
|
export {};
|
||||||
+34
@@ -0,0 +1,34 @@
|
|||||||
|
/* tslint:disable max-classes-per-file */
|
||||||
|
import { decompressJson, padStart } from './utils';
|
||||||
|
import AllEncodingsCompressed from './all-encodings.compressed.json';
|
||||||
|
var decompressedEncodings = decompressJson(AllEncodingsCompressed);
|
||||||
|
var allUnicodeMappings = JSON.parse(decompressedEncodings);
|
||||||
|
var Encoding = /** @class */ (function () {
|
||||||
|
function Encoding(name, unicodeMappings) {
|
||||||
|
var _this = this;
|
||||||
|
this.canEncodeUnicodeCodePoint = function (codePoint) {
|
||||||
|
return codePoint in _this.unicodeMappings;
|
||||||
|
};
|
||||||
|
this.encodeUnicodeCodePoint = function (codePoint) {
|
||||||
|
var mapped = _this.unicodeMappings[codePoint];
|
||||||
|
if (!mapped) {
|
||||||
|
var str = String.fromCharCode(codePoint);
|
||||||
|
var hexCode = "0x" + padStart(codePoint.toString(16), 4, '0');
|
||||||
|
var msg = _this.name + " cannot encode \"" + str + "\" (" + hexCode + ")";
|
||||||
|
throw new Error(msg);
|
||||||
|
}
|
||||||
|
return { code: mapped[0], name: mapped[1] };
|
||||||
|
};
|
||||||
|
this.name = name;
|
||||||
|
this.supportedCodePoints = Object.keys(unicodeMappings)
|
||||||
|
.map(Number)
|
||||||
|
.sort(function (a, b) { return a - b; });
|
||||||
|
this.unicodeMappings = unicodeMappings;
|
||||||
|
}
|
||||||
|
return Encoding;
|
||||||
|
}());
|
||||||
|
export var Encodings = {
|
||||||
|
Symbol: new Encoding('Symbol', allUnicodeMappings.symbol),
|
||||||
|
ZapfDingbats: new Encoding('ZapfDingbats', allUnicodeMappings.zapfdingbats),
|
||||||
|
WinAnsi: new Encoding('WinAnsi', allUnicodeMappings.win1252),
|
||||||
|
};
|
||||||
+83
@@ -0,0 +1,83 @@
|
|||||||
|
declare const compressedJsonForFontName: {
|
||||||
|
'Courier': string;
|
||||||
|
'Courier-Bold': string;
|
||||||
|
'Courier-Oblique': string;
|
||||||
|
'Courier-BoldOblique': string;
|
||||||
|
'Helvetica': string;
|
||||||
|
'Helvetica-Bold': string;
|
||||||
|
'Helvetica-Oblique': string;
|
||||||
|
'Helvetica-BoldOblique': string;
|
||||||
|
'Times-Roman': string;
|
||||||
|
'Times-Bold': string;
|
||||||
|
'Times-Italic': string;
|
||||||
|
'Times-BoldItalic': string;
|
||||||
|
'Symbol': string;
|
||||||
|
'ZapfDingbats': string;
|
||||||
|
};
|
||||||
|
export declare enum FontNames {
|
||||||
|
Courier = "Courier",
|
||||||
|
CourierBold = "Courier-Bold",
|
||||||
|
CourierOblique = "Courier-Oblique",
|
||||||
|
CourierBoldOblique = "Courier-BoldOblique",
|
||||||
|
Helvetica = "Helvetica",
|
||||||
|
HelveticaBold = "Helvetica-Bold",
|
||||||
|
HelveticaOblique = "Helvetica-Oblique",
|
||||||
|
HelveticaBoldOblique = "Helvetica-BoldOblique",
|
||||||
|
TimesRoman = "Times-Roman",
|
||||||
|
TimesRomanBold = "Times-Bold",
|
||||||
|
TimesRomanItalic = "Times-Italic",
|
||||||
|
TimesRomanBoldItalic = "Times-BoldItalic",
|
||||||
|
Symbol = "Symbol",
|
||||||
|
ZapfDingbats = "ZapfDingbats"
|
||||||
|
}
|
||||||
|
export declare type IFontNames = FontNames | keyof typeof compressedJsonForFontName;
|
||||||
|
export interface ICharMetrics {
|
||||||
|
/** Decimal value of default character code (-1 if not encoded) */
|
||||||
|
/** Width of character */
|
||||||
|
WX: number;
|
||||||
|
/** Character name (aka Glyph name) */
|
||||||
|
N: string;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* [name_1 name_2 number_x]:
|
||||||
|
* Name of the first character in the kerning pair followed by the name of the
|
||||||
|
* second character followed by the kerning amount in the x direction
|
||||||
|
* (y is zero). The kerning amount is specified in the units of the character
|
||||||
|
* coordinate system.
|
||||||
|
*/
|
||||||
|
export declare type IKernPair = [string, string, number];
|
||||||
|
export declare class Font {
|
||||||
|
static load: (fontName: IFontNames) => Font;
|
||||||
|
Comment: string;
|
||||||
|
FontName: string;
|
||||||
|
FullName: string;
|
||||||
|
FamilyName: string;
|
||||||
|
Weight: string;
|
||||||
|
CharacterSet: string;
|
||||||
|
Version: string;
|
||||||
|
Notice: string;
|
||||||
|
EncodingScheme: string;
|
||||||
|
ItalicAngle: number;
|
||||||
|
UnderlinePosition: number;
|
||||||
|
UnderlineThickness: number;
|
||||||
|
CapHeight: number | void;
|
||||||
|
XHeight: number | void;
|
||||||
|
Ascender: number | void;
|
||||||
|
Descender: number | void;
|
||||||
|
StdHW: number;
|
||||||
|
StdVW: number;
|
||||||
|
IsFixedPitch: boolean;
|
||||||
|
/**
|
||||||
|
* [llx lly urx ury]:
|
||||||
|
* Font bounding box where llx, lly, urx, and ury are all numbers.
|
||||||
|
*/
|
||||||
|
FontBBox: [number, number, number, number];
|
||||||
|
CharMetrics: ICharMetrics[];
|
||||||
|
KernPairs: IKernPair[];
|
||||||
|
private CharWidths;
|
||||||
|
private KernPairXAmounts;
|
||||||
|
private constructor();
|
||||||
|
getWidthOfGlyph: (glyphName: string) => number | void;
|
||||||
|
getXAxisKerningForPair: (leftGlyphName: string, rightGlyphName: string) => number | void;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
+83
@@ -0,0 +1,83 @@
|
|||||||
|
import { decompressJson } from './utils';
|
||||||
|
import CourierBoldCompressed from './Courier-Bold.compressed.json';
|
||||||
|
import CourierBoldObliqueCompressed from './Courier-BoldOblique.compressed.json';
|
||||||
|
import CourierObliqueCompressed from './Courier-Oblique.compressed.json';
|
||||||
|
import CourierCompressed from './Courier.compressed.json';
|
||||||
|
import HelveticaBoldCompressed from './Helvetica-Bold.compressed.json';
|
||||||
|
import HelveticaBoldObliqueCompressed from './Helvetica-BoldOblique.compressed.json';
|
||||||
|
import HelveticaObliqueCompressed from './Helvetica-Oblique.compressed.json';
|
||||||
|
import HelveticaCompressed from './Helvetica.compressed.json';
|
||||||
|
import TimesBoldCompressed from './Times-Bold.compressed.json';
|
||||||
|
import TimesBoldItalicCompressed from './Times-BoldItalic.compressed.json';
|
||||||
|
import TimesItalicCompressed from './Times-Italic.compressed.json';
|
||||||
|
import TimesRomanCompressed from './Times-Roman.compressed.json';
|
||||||
|
import SymbolCompressed from './Symbol.compressed.json';
|
||||||
|
import ZapfDingbatsCompressed from './ZapfDingbats.compressed.json';
|
||||||
|
// prettier-ignore
|
||||||
|
var compressedJsonForFontName = {
|
||||||
|
'Courier': CourierCompressed,
|
||||||
|
'Courier-Bold': CourierBoldCompressed,
|
||||||
|
'Courier-Oblique': CourierObliqueCompressed,
|
||||||
|
'Courier-BoldOblique': CourierBoldObliqueCompressed,
|
||||||
|
'Helvetica': HelveticaCompressed,
|
||||||
|
'Helvetica-Bold': HelveticaBoldCompressed,
|
||||||
|
'Helvetica-Oblique': HelveticaObliqueCompressed,
|
||||||
|
'Helvetica-BoldOblique': HelveticaBoldObliqueCompressed,
|
||||||
|
'Times-Roman': TimesRomanCompressed,
|
||||||
|
'Times-Bold': TimesBoldCompressed,
|
||||||
|
'Times-Italic': TimesItalicCompressed,
|
||||||
|
'Times-BoldItalic': TimesBoldItalicCompressed,
|
||||||
|
'Symbol': SymbolCompressed,
|
||||||
|
'ZapfDingbats': ZapfDingbatsCompressed,
|
||||||
|
};
|
||||||
|
export var FontNames;
|
||||||
|
(function (FontNames) {
|
||||||
|
FontNames["Courier"] = "Courier";
|
||||||
|
FontNames["CourierBold"] = "Courier-Bold";
|
||||||
|
FontNames["CourierOblique"] = "Courier-Oblique";
|
||||||
|
FontNames["CourierBoldOblique"] = "Courier-BoldOblique";
|
||||||
|
FontNames["Helvetica"] = "Helvetica";
|
||||||
|
FontNames["HelveticaBold"] = "Helvetica-Bold";
|
||||||
|
FontNames["HelveticaOblique"] = "Helvetica-Oblique";
|
||||||
|
FontNames["HelveticaBoldOblique"] = "Helvetica-BoldOblique";
|
||||||
|
FontNames["TimesRoman"] = "Times-Roman";
|
||||||
|
FontNames["TimesRomanBold"] = "Times-Bold";
|
||||||
|
FontNames["TimesRomanItalic"] = "Times-Italic";
|
||||||
|
FontNames["TimesRomanBoldItalic"] = "Times-BoldItalic";
|
||||||
|
FontNames["Symbol"] = "Symbol";
|
||||||
|
FontNames["ZapfDingbats"] = "ZapfDingbats";
|
||||||
|
})(FontNames || (FontNames = {}));
|
||||||
|
var fontCache = {};
|
||||||
|
var Font = /** @class */ (function () {
|
||||||
|
function Font() {
|
||||||
|
var _this = this;
|
||||||
|
this.getWidthOfGlyph = function (glyphName) {
|
||||||
|
return _this.CharWidths[glyphName];
|
||||||
|
};
|
||||||
|
this.getXAxisKerningForPair = function (leftGlyphName, rightGlyphName) {
|
||||||
|
return (_this.KernPairXAmounts[leftGlyphName] || {})[rightGlyphName];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
Font.load = function (fontName) {
|
||||||
|
var cachedFont = fontCache[fontName];
|
||||||
|
if (cachedFont)
|
||||||
|
return cachedFont;
|
||||||
|
var json = decompressJson(compressedJsonForFontName[fontName]);
|
||||||
|
var font = Object.assign(new Font(), JSON.parse(json));
|
||||||
|
font.CharWidths = font.CharMetrics.reduce(function (acc, metric) {
|
||||||
|
acc[metric.N] = metric.WX;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
font.KernPairXAmounts = font.KernPairs.reduce(function (acc, _a) {
|
||||||
|
var name1 = _a[0], name2 = _a[1], width = _a[2];
|
||||||
|
if (!acc[name1])
|
||||||
|
acc[name1] = {};
|
||||||
|
acc[name1][name2] = width;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
fontCache[fontName] = font;
|
||||||
|
return font;
|
||||||
|
};
|
||||||
|
return Font;
|
||||||
|
}());
|
||||||
|
export { Font };
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJx9WFlv2zgQ/iuGnnYBt5DkS85bmk13g27SoEkPbNEHWqIlIhSpklSuov99R7JIkSLtFyGZjxzN8c0h/4oueF1jpqKz6Mt1K1GJZ4s4S+PZYrvdbqJ59J4zdYNqDAfuXuodp52spdSToZrQl6n0KyZl1Sm/xgVpa5BcKURJfs5KCgdj+F++J8+4uCUqr6IzJVo8jy4qJFCusLjD3d27BucE0cGYd+/4c3T2/U2SxfM36XYxT+JtDI8k/jGPPrMCC0oYvuWSKMJZdPYmiWMLuK9I/sCwlNHZCuRfsJD9sSiOk7dxnMFbbrgieefGBW9eROfA7I/8z1myzVbz7rnpn9vuCW/unpvZecF3eHb3IhWu5eyK5Vw0XCCFi7ezc0pnvRo5E1hi8QhCeM0lHCoIK+/yCvdR67zrfd2THPA7VfzzNTrbpv2fX+BPeH8fm2usBMnBg++/oq/forO08+QGNMgGgeG/5wfxYrE4iPFzTlFt5JtkkLeMPIL/EFoNreJBE2vrXReako3YcqvVEXCTKWJdzPS7Gizyjk/mZZvsAKC66d7FCgMtF4NC2eaVqpDyLW+QwIzi/TGoD6tvPQL7BJEPNVKVb39DW2mkJnY5FALyD9eEhU6DL4SPrqTaS0mRrHyDXrHgvpQz7AvVU+CkqgQOnN3zVgSkkFVfKslzQIgfMfPFOBxWRiyDjcs5p5wFIoFr4kImprQrP59WP1ubiVpcCgxlNLq5XC4PwM8Wy77EvSs5ZyU0EpuFaXqAzmlTjVlerzcH8TuskH/4oiLj0WQQ/oWpdXadJAfxZSOJ7exmPfD01lYSD8K/kU0288JLS7Mh+hW337dINCPA5MRX8QE1jXU8Wx/E/6J6V4zyLBtCdd36Km4Cso+QTOG4N6T5dvRusxxsu6/scK5Wgw2fKovZ20HxHSnrQDjv0WjEejvw7/MkxmMD6ZQkvnEfa1xayperg/ibZfN2kN1K4lvxHw4lZAfD6QErpy1lOt2QF4H3XATa8HDP7VnrVWY6SoNZQfKWokBRt90Ak7mt2GACwTVE8bNPE+Tw3VTIzkmQqRuLqsvtUGaFw3cTcjzJxSod3tjYSnQgS4fvpgyc8KaDZuLwXR8FtYlv8YPD9rHBuGxfbQYG1q1vL2v9+3zC9nF0EF+BqoLBFBbbjRfSYbsJprLYboxtpx1Fj23esXoMhqlx7rB9uR2OPxP/aCMDmX61/Vhm8cha7HA91bzbWUR1z0/m8tLUKSyJ1qWNHqeXrTUf16lb76Or6XIzTmWFA4mHyeLOkUS3+H23UpJQPAnbE0bUS2CSUi6IdWM13Mhpu/OlBUE1t/YbA1QYCeWLYVsrRh+SeDm0RCQEf9pxa3Xpds4RcpJhqNVDbXPkzqTpOJcK/mT1VO17gUtn57C3J3cpMlUucW77Px3hRwZ83VJFGvriJ6YRHJboLmnWPUNXWAC7FbQg+/0IrjUL4RMFBxhYkEdSBLxiXB0xD8TkEZorywPXoP0I/jxhXGzWKEoJUFgeiTvs3srq2eO9Hq2Aeq92S9eDIgeYwIeawKoVY+KyVOumuBmpY0r+CgrgQVn7ohl9n6aIoc4TJjB0lEDWvmaGa05ETrGfPRd3lm1jI64b9SKtBJlbhAFTgEhuqWoUvlhCFdwRBW613cNWqnGYyDAdj+OQfdnugpBWHUa14jAKbbN2tlDrfR6mXUT9p7F3peyGvHNBb0UCl933GHgmyN6Hc/0R6+KZxiG7Ba6ReJjg6RiAos0DpTRsHWNz1s284Mr58DI+UF52N8B7vyIGzP4+nGJcWLXiNMtiR0/0S0BPtExAj3ZNwE42zh11e6duTZS/YlZaK6DebfrkOsb4aURMnsqiA+viHpPowDrwsoX1y6moRTZ20cMXtmpOgFYf8sGd8kFrRw4ptuCQagu2lJvwmpXEUu2DNSlOoEf12vY4aXOZkG6WY8OC4hzrwHRcjVhWepjd4KdYKK7jrx5H89WjRxPWoycydlS3jZ/I2VS/G9yp9gB6PG1T1aY4YAp3LfPHPPqABbtFRHS/jf34/T82FAfb"
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJxtmNtu20YQhl+F4FULyMGeD7pz3AY1ChtG7NpFA18w1NomIlECSRcxgrx7SVk7+wOdG8H5OJydf2Z2d5gf9cV+t0v9VK/r+6vXsXlOlbHe28paq229qj/t++m62aXZ4J/m8PRb1z9/baZxefK63Z6eXN5dVMvTCh83u277xr/6kLrnl2XNq7TpXnczuZyabdee98/b2VzM/x4/dd/T5qab2pd6PQ2vaVVfvDRD005puE3Lu7eH1HbN9hTjx4/77/X6y5lcnUmjVzHIVVDicVX/1W/SsO36dLMfu6nb9/X6TAoBD+5euvZbn8axXtuZ36dhPJrVQqgPQoh5hev91LWLkIv94W1Ygq9+aX+tZAx2tfz64284/sblN/rqfLP/mqrbt3FKu7G67Nv9cNgPzZQ2H6rz7bb6vLgZq89pTMO/M/xfEqturJpqSM/d7GJIm2oamk3aNcO3av80O5xh3yyKmm1193ZIT02bqovTKjP+MAf++7zsZvZ3276kYyWWXB0z99S18/PbafPHQ71W4fjn/fxnFO+ZvkrT0LVzTr78qB/+nk38bHM9exgP8zr1z9U7jt6840YW5uSJKcZOCaBBnKgm5mU8MVNYyMwWFvO7Ukagkmgg6sDWQ5yFFqjzUrLEaQ3BEmiwNsMSaZS0vgWfOkPHWQowNeTUc0kumnxZvsgPxlGai6VTGUqAVCTQ6QkWnc77DKEiLktSUBJKqHIQZ86d8gCpHYoiEzMsb1ubYy8vW50DChB5ZhGqrijD0EqUIeiaEHIfCg5Kpuu0ApiToaGPSY0uaQsyr65L2oKi1yFt1PLaQ3lzfXTgXodGoJYzglndSLDMPg1sTPJpQJHJigw0QrGERqD9YhyTOgONQDUyuF1zaxuokc/BW2ztXCMrGZ9WMW1oQZHIXWNBkSCfRZEL5BMUiZw6CzVSFCfUSGZFNjIldoKDkonTKQiJIGzWmFd3BizJJ9SINoLDriOfUCOZS+zg+KGD1qGiLNMLxtJD1/ns00ON6EzyUCM6vbxhoBKaqbG3DFQCNiL1iHccBPV0DHhQH/JW8EW90dkyFKGywCJU0WkVSvSGeiSUODWFFD0HYdPQVoiRgfPMA+/nnRgiAyNYSjpWNQcNSMrtFCUH4ZIRpSCWocFCSuhCEY6hoUClc0WC52BJlCYYLQdhN+hygRRRlo5BKRRLS6oihSqh+ZzzRGG1Mo4Iz1LoP0qsxDGFzk0JE42ji0jCPejomJKCuwil4m5CiRMEUMVSzVLDUstSx1Juc0oVWMpqY295qVltmtWmWW2a1aZZbZrVplltmtWmWW2G1WZYbYbVZlhthtVmWG2G1WZYbYbVZlhtltVmWW2W1WZZbZbVZlltltVmWW2W1QYjQCh7E2aAQHeGhCFgPoNoy8KNb2wxBhmGKBxoUZXlLGsLI6AsftEDHV0wIURVbANLcTKlGGBIKPOAxCmhePCKUwFzAmpDFRQvjA9R06Hq8TONvshgKDCuRAZTXigUxjxNFfKRo3CLhnIJBMFRvMZpqpNBMlQJzGT5WFQMVQI/AikPMIhEU1aDjqJvQwmjSHB05cC9jbYwc5UtAHNLhDw41ha+lEqF4JaH3gmB61SYcqInxTDmQK8v08vjqv4zDf1N0w3Lf4A8/vwPpfK11w=="
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './Font';
|
||||||
|
export * from './Encoding';
|
||||||
+2
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './Font';
|
||||||
|
export * from './Encoding';
|
||||||
+3
@@ -0,0 +1,3 @@
|
|||||||
|
export declare const decodeFromBase64: (base64: string) => Uint8Array;
|
||||||
|
export declare const decompressJson: (compressedJson: string) => string;
|
||||||
|
export declare const padStart: (value: string, length: number, padChar: string) => string;
|
||||||
+62
@@ -0,0 +1,62 @@
|
|||||||
|
/*
|
||||||
|
* The `chars`, `lookup`, and `decodeFromBase64` members of this file are
|
||||||
|
* licensed under the following:
|
||||||
|
*
|
||||||
|
* base64-arraybuffer
|
||||||
|
* https://github.com/niklasvh/base64-arraybuffer
|
||||||
|
*
|
||||||
|
* Copyright (c) 2012 Niklas von Hertzen
|
||||||
|
* Licensed under the MIT license.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import pako from 'pako';
|
||||||
|
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
|
||||||
|
// Use a lookup table to find the index.
|
||||||
|
var lookup = new Uint8Array(256);
|
||||||
|
for (var i = 0; i < chars.length; i++) {
|
||||||
|
lookup[chars.charCodeAt(i)] = i;
|
||||||
|
}
|
||||||
|
export var decodeFromBase64 = function (base64) {
|
||||||
|
var bufferLength = base64.length * 0.75;
|
||||||
|
var len = base64.length;
|
||||||
|
var i;
|
||||||
|
var p = 0;
|
||||||
|
var encoded1;
|
||||||
|
var encoded2;
|
||||||
|
var encoded3;
|
||||||
|
var encoded4;
|
||||||
|
if (base64[base64.length - 1] === '=') {
|
||||||
|
bufferLength--;
|
||||||
|
if (base64[base64.length - 2] === '=') {
|
||||||
|
bufferLength--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var bytes = new Uint8Array(bufferLength);
|
||||||
|
for (i = 0; i < len; i += 4) {
|
||||||
|
encoded1 = lookup[base64.charCodeAt(i)];
|
||||||
|
encoded2 = lookup[base64.charCodeAt(i + 1)];
|
||||||
|
encoded3 = lookup[base64.charCodeAt(i + 2)];
|
||||||
|
encoded4 = lookup[base64.charCodeAt(i + 3)];
|
||||||
|
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
|
||||||
|
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
|
||||||
|
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
};
|
||||||
|
var arrayToString = function (array) {
|
||||||
|
var str = '';
|
||||||
|
for (var i = 0; i < array.length; i++) {
|
||||||
|
str += String.fromCharCode(array[i]);
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
export var decompressJson = function (compressedJson) {
|
||||||
|
return arrayToString(pako.inflate(decodeFromBase64(compressedJson)));
|
||||||
|
};
|
||||||
|
export var padStart = function (value, length, padChar) {
|
||||||
|
var padding = '';
|
||||||
|
for (var idx = 0, len = length - value.length; idx < len; idx++) {
|
||||||
|
padding += padChar;
|
||||||
|
}
|
||||||
|
return padding + value;
|
||||||
|
};
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtyGjkQ/RVqnnar8Bb4lpg3jEnCxgEvGDtxKg9iphm01oyILrZxKv++mrGd3az6KC8UnNa0+nrUGr5lI11VVLtskF198FaU1Dns9w9OOkf7/ePDrJu90bWbiorCgpH2RpLZO9WqaCReqZ8lnReJqKTa/SwL8DXJctPs9Lxs4oSS+bAuVVjXC7/tG/lAxYV0+SYbOOOpm402wojckVlQ8+T4wVFdUDHXlaifrTs91Q/Z4PNeMLu7t3/U6746POm+7vW/dLNlWGuUrOlCW+mkrrPBXr/X+4/gciPz25qszQbhyeyKjG2XZb3ewR+9Xi/sMdVO5k+ebHemcaHzW/57p3/y+qQbPk967We//TxoP191hoVeUWexs44q25nUuTZbbYSj4o9OZ6hUZ97osZ05WTJ3AQ37jMOqQtblIt9QG7lWycKJuhCmeJGGhSOxffccyqPj/W728eXX4cFJNxvavAmRyQbH++HnGf34vdc/etXNFq54d50NXh+2X6/C137v+CnQH8gZmYdQfP6WXX8MCppQTYMlditCBL53/wfTQ65EFeNfvQ6erlQsqX21akJc1rGs0EoJE+NbMnlToZFAVEFkQ3iABW2uGH3CUK1ojUTgMWEbjfaWeUp5G6N5aCwRw5vddkOM98EVqRlPrBJ2E8OPZHSM6prJkrtnVrqNIWbtOjQrg8o7Zq2VDwxId5x3xMe0lpzBuVaa0WGpkkCkmgaON/3qBVODpaHQiIybXz3ZliTi3DO2D2PoNIZGMXQWQ+MYehNDb2PoXQxNYujPGHofQ+cx9CGGpjE0i6GLGPorhuYxtIihyxhaxtBVDF3H0McY+hRDNzG0CqfQLTmeNlZBBvr0+TnIKbmUuTS5Z1jUN6xtw8nBtEjLb7wxDOesmB5j+JfpIIYLmIZiWC6GZAz9HUMMvTItzESL6VqG9rZMKGOI4QaGXpjY+xi6i6H7GGKYdMeQPl9foBBW3GHark9Vo5OqgEd9oe+ZOPOnc3NcqmZgiUuomehYnt1xZ8daaSPZ8wBoyb0Jx3jOBLBtGyvbiRNOLXw0Sy+DpNKAAhpxq/gXYhD6NdMda6bwwyTH0kwhypI70p5wdhR7Gjia3JEhpvfDLCRKI7YcqYXJnxgv/g3vSthEhNNSEKIfCQByUkpurWQaNXjqNtqjSfHp0OdLOwSAG31E7h03uLRMvlbEtDPoq0rkhqvhlSFu40I7kfP9VoRLFrH+G7YLcypCQLkJ1delML5SwjPb6DIMmQxL54L1gyq+YIfMyKNNsQ4zHj8UnoMDdoZwfoMqkJxX7A6Cj3czWzLdqcC+GuGM9tCa4RobSp5J2gTnk0D5CVA0Pp1RAqn7hC0o5J3kqvkTsGyY6gwBHlqmHtqBh2x77UI9QimVS75PljgMAjXDEljn0QNjvMlZIAju/pF0NH95VcFshSgnB3Ug+LhMkwYoVKOAUS+T2kZIG2DVcYInLXDTQkKUYHelH6kuGcEcbPE26aRPNklKOEQpNcCQHPp6k4jc5UYbRtkM7T4HcVsAvADWLtEGnq/M9t2G9e2Aw8xEM1CCQ4QDWq28cnKrmDHTAwcvgYNh1HJSqEKumdvVDlPDFOwjU8UyTpZZ4tTBohzYUSMaRAmdggBNgKLmzVsYGLjXbyujb6lm70CGSmnB1PsWJHuSYhQfupq/ioxBTRngkEaRuQEP3ICIPb/kAq/Axo6ZUEaQFFSStxwa/eDpiARDND4kqhIE+BG1Btp7hjKCjh6UKYt2xk7MkmMJ8PCMlGNy5XiSdvc6wYjYtIp5pSGBRTo9Z45R6Asw4bQ8HgrYhEJmTFsk6pWvyPfJOj4HiXNGFFQJw1hOCVaYgChNUOGcA6tD0DZCMSdDczMBDa5TFVWDqWn5i/yB+BByqARcGhx6ziqXVD4Ii2TqZmnLi8AS3L8dGqRoBIzwkM0LmXNpOAOKTNKbKciPBvg8XdZJ6RDoHEKO5meuGdDzmOiQMTrt0d63SVfAIDBJtgIwwaUvN7ps8l1r7v0I5lKPRUEV+rcqfaHlDvJH4FSdVBVCjk8IiXp87Jv/Ib90s/dk6gshTfPv8Zfv/wDUfBK2"
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtyGjkQ/RVqnnarcAo7vuE3jEnCxgEvGDtxKg9iRgxaa0ZEF9s4lX/fnrGdTVZ9lBcKTmvU96PW8C0bmqqStc9OsqsPwYlSdnaPDvb6naP+3v5+1s3emNpPRCVpwdAEq6TdOTW6mC61+hpksyBo/euCTrOg89MKUSm9/XUNwddSletGcbOcfo+90Cof1KWmdTu7e4S4N+pBFhfK5+vsxNsgu9lwLazIvbRz2Tw7evCyLmQxM5Won809PTUP2cnnnYOj7s7eQa97fNjvHvd2v3SzBS21WtXywjjllakbRb3eT4LLtcpva+lcdkJPZlfSunZZ1uu9ftXr9UjFxHiVP7my2drGh84f+Z+d3f5xv0uf/V77udt+vm4/jzqDwixlZ751XlauM65zYzfGCi+LV53OQOvOrNnHdWbSSXtHKOkZ0apC1eU8X8s2dO0mcy/qQtjiRUoLh2Lz7jmWB4cUto8vv/Zf97vZwOVNhGx2crhHP8/kj987uxShbO6Ld9fZyfF++/WKvu72Dp/i/EF6q3IKxedv2fVH2qAJ1YQscRtBEfje/R8sH3Itqhj/Ggx5utSxpA7VsglxWceywmgtbIxvpM2bio0EoiKRo/AAC9pcMfsJK2stV0gEHhOu2dHdMk/p4GI0p0YTMbzebtaS8Z5cUYbxxGnh1jH8KK2JUVMzWfL3zEq/tpJZu6JuZVB1x6x16oEB5R3nneRjWivO4Nxow+zhZKWASDcNHCv9GgRTg6WV1IiMm8ReriWJOPeM7YMYOo2hYQydxdAoht7E0NsYehdD4xj6K4bex9B5DH2IoUkMTWPoIob+jqFZDM1j6DKGFjF0FUPXMfQxhj7F0E0MLekQupWep40lyUCfPj8HOSVXKlc2DwyLhoa1HZ0cTIu0/MYbw3DOkukxhn+ZDmK4gGkohuViSMXQPzHE0CvTwky0mK5laG/DhDKGGG5g6IWJfYihuxi6jyGGSbcM6fP1BQphyR2m7fpUNXqlC3jUF+aeiTN/OjfHpW4GlriEmoGO5dktd3astLGKPQ/ALnmwdIznTADbtnGqHTnh1MJHswyKJJUBFNCI241/IwahXzHdsWIKnyY5lmYKUZbckfaEs6PY08DR5E5ayfQ+zUKitGLDkRpdASTjxX/hXQqXiHBaCkL0IwFALrVWG6eYRiVP/doENCk+Hfp8aVMAuNFH5MFzg0vL5CstmXYGfVWJ3HI1vLSSU1wYL3K+3wq6ZUnWf8t2YS4LCig3oYa6FDZUWgRGjSlpyGRYOhesH7LiC3bAjDzGFiua8fih8BwcsFOE8woqIrmgWQ2Cj3czWzLdqYFeg3Bmd2pNusVSyTNJG+N8SlB+AhRNSGdUgtR9whYU6k5x1fwJWDZIdYYADy1SD23BQ669dqEekaktF3yfLHAYBGqGBbAuoAdGWMkZEQR3/0g6mr+8qmBUIcrJQR0IPi6TpAEa1Shg1MvkbkO0G2DVUYInHXDTQUJUQLs2j7IuGcEMqHibdDIkmyQlHKCUWmBIDn29SUTucm0ss9kUaZ+BuM0BXgBrF0hB4CuzfbfhQjvgMDPRFJTgAOGAVqugvdpoZswMwMFL4CCNWl4JXagVc7vaYmqYAD0qVSyjZJklTh0syoEdNaJBlNAJCNAYbNS8eaOBgXv9trTmVtbsHcjKUjkw9b4FyR6nGCVQV/NXkRGoKQscMigyN+CBGxCx55dc4BXYyDMTyhCSgk7ylkejHzwdkWCAxodEVYIAP6LWQLqnKCPo6EGZckgzdmKaHEuAh2dSeyZXnidpf28SjIhNq5hXGgpYZNJz5giFvgATTsvjVMCWCpkxbZ6oV74i3yfr+BwkzltRyEpYxnKZYIUxiNIYFc45sJqCthaaORmamwlocJOqqBpMTYvf5A/ERyKHSsCl5NBzVrmk8kGYJ1M3TVteEEtw/3YYkKIhMCJANi9UzqXhDGxkk95MQH4MwGfpsk5KB2DPAeRofuaagn0eEx0yQqc90n2bdAUMAuNkKwATfPpyY8om37Xh3o9gLg1YRFuhf6vSF1ruIH8ETtXJrSjk+IRQqMdHofkf8ks3ey9tfSGUbf49/vL9XxrnGMA="
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWVtT2zgU/isZP+3OhE5Iy/UtDaHNFhI2IdDS4UGxFUeLbKW6AKHT/77Hhnbb1fnUFw98x9K5fzpyvmZDU1Wy9tlxdnUenChlZ3e//+awc7B32D/Kutmpqf1EVJJeGJpglbQ706VWX4JshEHrX4Wdn4SiUnr7q5jga6nKdaPvXBYqVISMvdAqH9Slpjd3dvuEuFP1KIsL5fN1duxtkN1suBZW5F7auWxWjx69rAtZzEwl6hc73741j9nx553+QXenv9frHr456h729m672YJetVrV8sI45ZWpG0W93k+Cy7XK72rpXHZMK7MraV37WtbrvX7V6/VIxcR4lT87s9naxovOH/mfnd2jw6MuPY967XO3ffbb5+v2edAZFGYpO/Ot87JynXGdG7sxVnhZvOp0Blp3Zs1urjOTTtp7QknbiN4qVF3O87VsQ9huMveiLoQtvkvpxaHYvH+J6d4+Be/j9//e9Pe72cDlTZxsdrzfP+pmJ/LH/zu7ewfdbO6L99e0crf98+rlzybY59JblVM8Pn/Nrj/S+iZeEzLEbQSF4Vv3f7B8zLWoYvxLMOToUseSOlTLJs5lHcsKo7WwMb6RNm/qNRKIikSOogMsaBPG7CesrLVcIRFYJlyzo7tjVungYjSnNhMxvN5u1pLxnlxRhvHEaeHWMfwkrYlRUzNZ8g/Mm35tJfPuipqWQdU9865Tjwwo7znvJB/TWnEG50YbZg8nKwVEuuniWOmXIJgaLK2kPmTcJBJzLVPEuWdsH8TQ2xgaxtBJDI1i6DSG3sXQ+xgax9BfMfQhhs5i6DyGJjE0jaGLGPo7hmYxNI+hyxhaxNBVDF3H0McY+hRDNzG0pJPoTnqeNpYkA336sg5ySq5UrmweGBYNDWk7OjiYFmn5jTeG4Zwl02MM/zIdxHAB01AMy8WQiqF/YoihV6aFmWgxXcvQ3oYJZQwx3MDQCxP7EEP3MfQQQwyTbhnS5+sLFMKSO0zb91PV6JUu4FFfmAcmzvzp3ByXuplX4hJqpjqWZ7fc2bHSxir2PAC75MHSMZ4zAWzbxql27oRTCx/NMiiSVAZQQCNuN/6NGIR+xXTHiil8GuRYmilEWXJH2jPOjmLPA0eTO2kl0/s0C4nSig1HanQJkIwX/4V3KVwiwmkpCNGPBAC51FptnGIalTz1axPQpPh86POlTQHgRh+RB88NLi2Tr7Rk2hn0VSVyy9Xw0kpOcWG8yPl+K+iyJVn/LduFOV3GaOBmuDvUpbCh0iIwakxJQybD0rlg/ZAVX7ADZuQxtljRjMcPhWfggJ0inFdQEckFzWoQfLyb2ZLpTg30GoQzu1Nr0lWWSp5J2hjnU4LyE6BoQjqjEqTuE7agUPeKq+ZPwLJBqjMEWLRILdqCRa69dqEekaktF3yfLHAYBGqGBbAuoAUjrOSECIK7fyQdzb9/r2BUIcrJQR0IPi6TpAEa1Shg1MvkbkO0G2DVUYInHXDTQUJUQLs2T7IuGcEMqHiXdDIkmyQlHKCUWmBIDn29SUTucm0ss9kUaZ+BuM0BXgBrF0hB4Cuz/bbhQjvgMDPRFJTgAOGAVqugvdpoZswMwMFL4CCNWl4JXagVc7vaYmqYAD0qVSyjZJklTh0syoEdNaJBlNAJCNAYbNR8eaOBgfv8trTmTtbsHcjKUjkw9b4DyR6nGCVQV/NXkRGoKQscMigyN2DBDYjYy0cu8Als5JkJZQhJQSd5y6PRD56OSDBA40OiKkGAn1BrIN1TlBF09KBMOaQZOzFNjiXAwxOpPZMrz5O0fzAJRsSmVcwnDQUsMuk5c4RCX4AJp+VxKmBLhcyYNk/UK1+RH5J1fAYS560oZCUsY7lMsMIYRGmMCucMWE1BWwvNnAzNzQQ0uElVVA2mpsVv8gfiI5FDJeBScuglq1xS+SDMk6mbpi0viCW4XzsMSNEQGBEgmxcq59JwAjaySW8mID8G4LN0WSelA7DnAHI0P3NNwT5PiQ4ZodMe6b5LugIGgXGyFYAJPn25MWWT79pw30cwlwYsoq3Qr1XpCy13kD8Bp+rkVhRyfEIo1OOj0PwOedvNPkhbXwhlm1+Pb7/9C/NFF2U="
|
||||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJyFWdtSGzkQ/RXXPO1WmZSBEAJvjnESb8AmGENCKg+ypj3Wohk5ugAmlX9fzUCyW6s+ysuUfVqXvh61Zr4XI1PX1PjiuLg6C05U1Ns/Ojx42TsYHB4eFf3irWn8VNQUB4xMsIpsCwatU1DUSm8T+JpUtW7XP6NShToiEy+0ksOm0nHkIP53b9UDlefKy3Vx7G2gfjFaCyukJzundu74wVNTUnlhatE8a/XmjXkojr/s7O33d/YOBv3D3YP+68HB136xiEOtVg2dG6e8Mk1xvLM7GPxHcLlW8rYh54rjOLO4Iuu6YcVgsP9iMBjELabGK/lkymZrWxt6f8g/e7tHr4/68Xk06J673XOve+53z8PesDRL6s23zlPtepNGGrsxVngqX/R6Q617F+1qrndBjuxdRONu4ziqVE01l2vqHNgtMveiKYUtf0rjwJHYvH/26MGrvX7x6ee/l3uv+sXQydZPtjh+tXfUL07o1/+d3YPDfjH35fvrOHO3+3n1/LN19hl5q2T0x5fvxfWnOL/11zQq4jYiuuFH/38wPUgt6hT/Fkw0dKlTSRPqZevnqkllpdFa2BTfkJVtdiYCUUeRi94BGnQBY9YTlhpNKyQC04RrV3S3zCwdXIrKWFQihdfbzZoY66MpyjCWOC3cOoUfyZoUNQ0TJX/PjPRrS8zYVSxZBlV3zFinHhiQ7jjriPdpoziFpdGGWcNRrYBIt1WcbvotCCYHK0uxDhkzvwVyHVOksWd0H6bQmxQapdBJCo1T6G0KvUuh9yk0SaG/UuhDCp2m0FkKTVNolkLnKfQxhS5SaJ5Clym0SKGrFLpOoU8p9DmFblJoGU+iW/I8bSyjDNTp8zzIKVIpqawMDIuGlrRdPDiYEun4jVeG4ZwlU2MM/zIVxHABU1AMy6WQSqG/U4ihV6aEGW8xVcvQ3oZxZQox3MDQC+P7kEJ3KXSfQgyTbhnS5/MLJMKSO0y78bls9EqX8KgvzT3jZ/50bo9L3fYraQq1XR3Ls1vu7FhpYxV7HoBVZLDxGJeMA7uycarrOmHXwnuzCipKagMooBV3C/9GDFy/YqpjxSR+bORYmilFVXFH2hPOtmJPDUcbO7LE1H7shURlxYYjtdj6E2PFv+5dCpfxcF4KXPQrAEBOWquNU0yhRkv92gTUKT4d+nxqRwdwrY+QwXONS8fkK01MOYO6qoW0XA4vLXEbl8YLyddbGa9axNpv2SqU8SoWG26Gu0NTCRtqLQKzjalik8mwtBSsHVTzCTtkWh5jy1Xs8fim8BQcsDOE8xvUkeSCZncQvL/b3pKpTg32NQhnVo+lGa+yMeWZoE1wPAmknwBJE/IRJRC6z1iDUt0pLps/A82GucoQYNIiN2kLJrnu2oVqhHJLLvg6WWA3CFQMC6BdQBPGeJOTSBDc/SNrqPz5voLZClGOBHkgeL9MswpolKOAUS+zq43QaoBVxxmedMBMBwlRgd21eaSmYgQXYIt3WSNDtkhywiEKqQWKSGjrTcZzl2tjmcVmaPcL4Lc5wEug7QJtEPjM7N5tuNA1OExPNAMpOEQ4oNU6aK82mmkzAzDwEhgYWy2vhC7VirldbTE1TME+Kpcs42yaZU4dLJJAjwbRIAroFDhoAhZq37zFhoF7/ba05pYa9g5kqVIOdL3vQLAnOUYJsar5q8gY5JQFBhnkmRsw4QZ47PklF3gFNvZMhzKCpKCzvOVR6wdPRyQYovYhk5XAwY+oNNDeMxQRdPSgSDm0MzZilm1LgIUnpD0TK8+TtL83GUbEqtXMKw0FNDL5PnOMXF+CDqfj8ZjANiYyo9o8k698Rn7I5vEpCJy3oqRaWEZzyrDCBHhpghLnFGgdnbYWmjkZ2psJKHCTy6gGdE2L38QP+IeQQRXg0mjQc1S5oPJOmGdDN8trXkaW4L52GBCiEVAiQDYvleTCcAIWsllrpiA+BuAX+bTOSodgzSHkaL7nmoF1HjMVMkanPdr7NmsKaAQm2VIAKvj85cZUbbwbw70fwVwasCguhb5W5S+03EH+CIxqsktFl+MTQqEaH4f2O+TXfvGBbHMulG2/Hn/98Q/b2xEO"
|
||||||
+24
@@ -0,0 +1,24 @@
|
|||||||
|
declare type EncodingCharCode = number;
|
||||||
|
declare type EncodingCharName = string;
|
||||||
|
interface UnicodeMappings {
|
||||||
|
[unicodeCodePoint: number]: [EncodingCharCode, EncodingCharName];
|
||||||
|
}
|
||||||
|
declare type EncodingNames = 'Symbol' | 'ZapfDingbats' | 'WinAnsi';
|
||||||
|
declare class Encoding {
|
||||||
|
name: EncodingNames;
|
||||||
|
supportedCodePoints: number[];
|
||||||
|
private unicodeMappings;
|
||||||
|
constructor(name: EncodingNames, unicodeMappings: UnicodeMappings);
|
||||||
|
canEncodeUnicodeCodePoint: (codePoint: number) => boolean;
|
||||||
|
encodeUnicodeCodePoint: (codePoint: number) => {
|
||||||
|
code: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export declare type EncodingType = Encoding;
|
||||||
|
export declare const Encodings: {
|
||||||
|
Symbol: Encoding;
|
||||||
|
ZapfDingbats: Encoding;
|
||||||
|
WinAnsi: Encoding;
|
||||||
|
};
|
||||||
|
export {};
|
||||||
+39
@@ -0,0 +1,39 @@
|
|||||||
|
"use strict";
|
||||||
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||||
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
/* tslint:disable max-classes-per-file */
|
||||||
|
var utils_1 = require("./utils");
|
||||||
|
var all_encodings_compressed_json_1 = __importDefault(require("./all-encodings.compressed.json"));
|
||||||
|
var decompressedEncodings = utils_1.decompressJson(all_encodings_compressed_json_1.default);
|
||||||
|
var allUnicodeMappings = JSON.parse(decompressedEncodings);
|
||||||
|
var Encoding = /** @class */ (function () {
|
||||||
|
function Encoding(name, unicodeMappings) {
|
||||||
|
var _this = this;
|
||||||
|
this.canEncodeUnicodeCodePoint = function (codePoint) {
|
||||||
|
return codePoint in _this.unicodeMappings;
|
||||||
|
};
|
||||||
|
this.encodeUnicodeCodePoint = function (codePoint) {
|
||||||
|
var mapped = _this.unicodeMappings[codePoint];
|
||||||
|
if (!mapped) {
|
||||||
|
var str = String.fromCharCode(codePoint);
|
||||||
|
var hexCode = "0x" + utils_1.padStart(codePoint.toString(16), 4, '0');
|
||||||
|
var msg = _this.name + " cannot encode \"" + str + "\" (" + hexCode + ")";
|
||||||
|
throw new Error(msg);
|
||||||
|
}
|
||||||
|
return { code: mapped[0], name: mapped[1] };
|
||||||
|
};
|
||||||
|
this.name = name;
|
||||||
|
this.supportedCodePoints = Object.keys(unicodeMappings)
|
||||||
|
.map(Number)
|
||||||
|
.sort(function (a, b) { return a - b; });
|
||||||
|
this.unicodeMappings = unicodeMappings;
|
||||||
|
}
|
||||||
|
return Encoding;
|
||||||
|
}());
|
||||||
|
exports.Encodings = {
|
||||||
|
Symbol: new Encoding('Symbol', allUnicodeMappings.symbol),
|
||||||
|
ZapfDingbats: new Encoding('ZapfDingbats', allUnicodeMappings.zapfdingbats),
|
||||||
|
WinAnsi: new Encoding('WinAnsi', allUnicodeMappings.win1252),
|
||||||
|
};
|
||||||
+83
@@ -0,0 +1,83 @@
|
|||||||
|
declare const compressedJsonForFontName: {
|
||||||
|
'Courier': string;
|
||||||
|
'Courier-Bold': string;
|
||||||
|
'Courier-Oblique': string;
|
||||||
|
'Courier-BoldOblique': string;
|
||||||
|
'Helvetica': string;
|
||||||
|
'Helvetica-Bold': string;
|
||||||
|
'Helvetica-Oblique': string;
|
||||||
|
'Helvetica-BoldOblique': string;
|
||||||
|
'Times-Roman': string;
|
||||||
|
'Times-Bold': string;
|
||||||
|
'Times-Italic': string;
|
||||||
|
'Times-BoldItalic': string;
|
||||||
|
'Symbol': string;
|
||||||
|
'ZapfDingbats': string;
|
||||||
|
};
|
||||||
|
export declare enum FontNames {
|
||||||
|
Courier = "Courier",
|
||||||
|
CourierBold = "Courier-Bold",
|
||||||
|
CourierOblique = "Courier-Oblique",
|
||||||
|
CourierBoldOblique = "Courier-BoldOblique",
|
||||||
|
Helvetica = "Helvetica",
|
||||||
|
HelveticaBold = "Helvetica-Bold",
|
||||||
|
HelveticaOblique = "Helvetica-Oblique",
|
||||||
|
HelveticaBoldOblique = "Helvetica-BoldOblique",
|
||||||
|
TimesRoman = "Times-Roman",
|
||||||
|
TimesRomanBold = "Times-Bold",
|
||||||
|
TimesRomanItalic = "Times-Italic",
|
||||||
|
TimesRomanBoldItalic = "Times-BoldItalic",
|
||||||
|
Symbol = "Symbol",
|
||||||
|
ZapfDingbats = "ZapfDingbats"
|
||||||
|
}
|
||||||
|
export declare type IFontNames = FontNames | keyof typeof compressedJsonForFontName;
|
||||||
|
export interface ICharMetrics {
|
||||||
|
/** Decimal value of default character code (-1 if not encoded) */
|
||||||
|
/** Width of character */
|
||||||
|
WX: number;
|
||||||
|
/** Character name (aka Glyph name) */
|
||||||
|
N: string;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* [name_1 name_2 number_x]:
|
||||||
|
* Name of the first character in the kerning pair followed by the name of the
|
||||||
|
* second character followed by the kerning amount in the x direction
|
||||||
|
* (y is zero). The kerning amount is specified in the units of the character
|
||||||
|
* coordinate system.
|
||||||
|
*/
|
||||||
|
export declare type IKernPair = [string, string, number];
|
||||||
|
export declare class Font {
|
||||||
|
static load: (fontName: IFontNames) => Font;
|
||||||
|
Comment: string;
|
||||||
|
FontName: string;
|
||||||
|
FullName: string;
|
||||||
|
FamilyName: string;
|
||||||
|
Weight: string;
|
||||||
|
CharacterSet: string;
|
||||||
|
Version: string;
|
||||||
|
Notice: string;
|
||||||
|
EncodingScheme: string;
|
||||||
|
ItalicAngle: number;
|
||||||
|
UnderlinePosition: number;
|
||||||
|
UnderlineThickness: number;
|
||||||
|
CapHeight: number | void;
|
||||||
|
XHeight: number | void;
|
||||||
|
Ascender: number | void;
|
||||||
|
Descender: number | void;
|
||||||
|
StdHW: number;
|
||||||
|
StdVW: number;
|
||||||
|
IsFixedPitch: boolean;
|
||||||
|
/**
|
||||||
|
* [llx lly urx ury]:
|
||||||
|
* Font bounding box where llx, lly, urx, and ury are all numbers.
|
||||||
|
*/
|
||||||
|
FontBBox: [number, number, number, number];
|
||||||
|
CharMetrics: ICharMetrics[];
|
||||||
|
KernPairs: IKernPair[];
|
||||||
|
private CharWidths;
|
||||||
|
private KernPairXAmounts;
|
||||||
|
private constructor();
|
||||||
|
getWidthOfGlyph: (glyphName: string) => number | void;
|
||||||
|
getXAxisKerningForPair: (leftGlyphName: string, rightGlyphName: string) => number | void;
|
||||||
|
}
|
||||||
|
export {};
|
||||||
+88
@@ -0,0 +1,88 @@
|
|||||||
|
"use strict";
|
||||||
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||||
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
var utils_1 = require("./utils");
|
||||||
|
var Courier_Bold_compressed_json_1 = __importDefault(require("./Courier-Bold.compressed.json"));
|
||||||
|
var Courier_BoldOblique_compressed_json_1 = __importDefault(require("./Courier-BoldOblique.compressed.json"));
|
||||||
|
var Courier_Oblique_compressed_json_1 = __importDefault(require("./Courier-Oblique.compressed.json"));
|
||||||
|
var Courier_compressed_json_1 = __importDefault(require("./Courier.compressed.json"));
|
||||||
|
var Helvetica_Bold_compressed_json_1 = __importDefault(require("./Helvetica-Bold.compressed.json"));
|
||||||
|
var Helvetica_BoldOblique_compressed_json_1 = __importDefault(require("./Helvetica-BoldOblique.compressed.json"));
|
||||||
|
var Helvetica_Oblique_compressed_json_1 = __importDefault(require("./Helvetica-Oblique.compressed.json"));
|
||||||
|
var Helvetica_compressed_json_1 = __importDefault(require("./Helvetica.compressed.json"));
|
||||||
|
var Times_Bold_compressed_json_1 = __importDefault(require("./Times-Bold.compressed.json"));
|
||||||
|
var Times_BoldItalic_compressed_json_1 = __importDefault(require("./Times-BoldItalic.compressed.json"));
|
||||||
|
var Times_Italic_compressed_json_1 = __importDefault(require("./Times-Italic.compressed.json"));
|
||||||
|
var Times_Roman_compressed_json_1 = __importDefault(require("./Times-Roman.compressed.json"));
|
||||||
|
var Symbol_compressed_json_1 = __importDefault(require("./Symbol.compressed.json"));
|
||||||
|
var ZapfDingbats_compressed_json_1 = __importDefault(require("./ZapfDingbats.compressed.json"));
|
||||||
|
// prettier-ignore
|
||||||
|
var compressedJsonForFontName = {
|
||||||
|
'Courier': Courier_compressed_json_1.default,
|
||||||
|
'Courier-Bold': Courier_Bold_compressed_json_1.default,
|
||||||
|
'Courier-Oblique': Courier_Oblique_compressed_json_1.default,
|
||||||
|
'Courier-BoldOblique': Courier_BoldOblique_compressed_json_1.default,
|
||||||
|
'Helvetica': Helvetica_compressed_json_1.default,
|
||||||
|
'Helvetica-Bold': Helvetica_Bold_compressed_json_1.default,
|
||||||
|
'Helvetica-Oblique': Helvetica_Oblique_compressed_json_1.default,
|
||||||
|
'Helvetica-BoldOblique': Helvetica_BoldOblique_compressed_json_1.default,
|
||||||
|
'Times-Roman': Times_Roman_compressed_json_1.default,
|
||||||
|
'Times-Bold': Times_Bold_compressed_json_1.default,
|
||||||
|
'Times-Italic': Times_Italic_compressed_json_1.default,
|
||||||
|
'Times-BoldItalic': Times_BoldItalic_compressed_json_1.default,
|
||||||
|
'Symbol': Symbol_compressed_json_1.default,
|
||||||
|
'ZapfDingbats': ZapfDingbats_compressed_json_1.default,
|
||||||
|
};
|
||||||
|
var FontNames;
|
||||||
|
(function (FontNames) {
|
||||||
|
FontNames["Courier"] = "Courier";
|
||||||
|
FontNames["CourierBold"] = "Courier-Bold";
|
||||||
|
FontNames["CourierOblique"] = "Courier-Oblique";
|
||||||
|
FontNames["CourierBoldOblique"] = "Courier-BoldOblique";
|
||||||
|
FontNames["Helvetica"] = "Helvetica";
|
||||||
|
FontNames["HelveticaBold"] = "Helvetica-Bold";
|
||||||
|
FontNames["HelveticaOblique"] = "Helvetica-Oblique";
|
||||||
|
FontNames["HelveticaBoldOblique"] = "Helvetica-BoldOblique";
|
||||||
|
FontNames["TimesRoman"] = "Times-Roman";
|
||||||
|
FontNames["TimesRomanBold"] = "Times-Bold";
|
||||||
|
FontNames["TimesRomanItalic"] = "Times-Italic";
|
||||||
|
FontNames["TimesRomanBoldItalic"] = "Times-BoldItalic";
|
||||||
|
FontNames["Symbol"] = "Symbol";
|
||||||
|
FontNames["ZapfDingbats"] = "ZapfDingbats";
|
||||||
|
})(FontNames = exports.FontNames || (exports.FontNames = {}));
|
||||||
|
var fontCache = {};
|
||||||
|
var Font = /** @class */ (function () {
|
||||||
|
function Font() {
|
||||||
|
var _this = this;
|
||||||
|
this.getWidthOfGlyph = function (glyphName) {
|
||||||
|
return _this.CharWidths[glyphName];
|
||||||
|
};
|
||||||
|
this.getXAxisKerningForPair = function (leftGlyphName, rightGlyphName) {
|
||||||
|
return (_this.KernPairXAmounts[leftGlyphName] || {})[rightGlyphName];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
Font.load = function (fontName) {
|
||||||
|
var cachedFont = fontCache[fontName];
|
||||||
|
if (cachedFont)
|
||||||
|
return cachedFont;
|
||||||
|
var json = utils_1.decompressJson(compressedJsonForFontName[fontName]);
|
||||||
|
var font = Object.assign(new Font(), JSON.parse(json));
|
||||||
|
font.CharWidths = font.CharMetrics.reduce(function (acc, metric) {
|
||||||
|
acc[metric.N] = metric.WX;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
font.KernPairXAmounts = font.KernPairs.reduce(function (acc, _a) {
|
||||||
|
var name1 = _a[0], name2 = _a[1], width = _a[2];
|
||||||
|
if (!acc[name1])
|
||||||
|
acc[name1] = {};
|
||||||
|
acc[name1][name2] = width;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
fontCache[fontName] = font;
|
||||||
|
return font;
|
||||||
|
};
|
||||||
|
return Font;
|
||||||
|
}());
|
||||||
|
exports.Font = Font;
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJx9WFlv2zgQ/iuGnnYBt5DkS85bmk13g27SoEkPbNEHWqIlIhSpklSuov99R7JIkSLtFyGZjxzN8c0h/4oueF1jpqKz6Mt1K1GJZ4s4S+PZYrvdbqJ59J4zdYNqDAfuXuodp52spdSToZrQl6n0KyZl1Sm/xgVpa5BcKURJfs5KCgdj+F++J8+4uCUqr6IzJVo8jy4qJFCusLjD3d27BucE0cGYd+/4c3T2/U2SxfM36XYxT+JtDI8k/jGPPrMCC0oYvuWSKMJZdPYmiWMLuK9I/sCwlNHZCuRfsJD9sSiOk7dxnMFbbrgieefGBW9eROfA7I/8z1myzVbz7rnpn9vuCW/unpvZecF3eHb3IhWu5eyK5Vw0XCCFi7ezc0pnvRo5E1hi8QhCeM0lHCoIK+/yCvdR67zrfd2THPA7VfzzNTrbpv2fX+BPeH8fm2usBMnBg++/oq/forO08+QGNMgGgeG/5wfxYrE4iPFzTlFt5JtkkLeMPIL/EFoNreJBE2vrXReako3YcqvVEXCTKWJdzPS7Gizyjk/mZZvsAKC66d7FCgMtF4NC2eaVqpDyLW+QwIzi/TGoD6tvPQL7BJEPNVKVb39DW2mkJnY5FALyD9eEhU6DL4SPrqTaS0mRrHyDXrHgvpQz7AvVU+CkqgQOnN3zVgSkkFVfKslzQIgfMfPFOBxWRiyDjcs5p5wFIoFr4kImprQrP59WP1ubiVpcCgxlNLq5XC4PwM8Wy77EvSs5ZyU0EpuFaXqAzmlTjVlerzcH8TuskH/4oiLj0WQQ/oWpdXadJAfxZSOJ7exmPfD01lYSD8K/kU0288JLS7Mh+hW337dINCPA5MRX8QE1jXU8Wx/E/6J6V4zyLBtCdd36Km4Cso+QTOG4N6T5dvRusxxsu6/scK5Wgw2fKovZ20HxHSnrQDjv0WjEejvw7/MkxmMD6ZQkvnEfa1xayperg/ibZfN2kN1K4lvxHw4lZAfD6QErpy1lOt2QF4H3XATa8HDP7VnrVWY6SoNZQfKWokBRt90Ak7mt2GACwTVE8bNPE+Tw3VTIzkmQqRuLqsvtUGaFw3cTcjzJxSod3tjYSnQgS4fvpgyc8KaDZuLwXR8FtYlv8YPD9rHBuGxfbQYG1q1vL2v9+3zC9nF0EF+BqoLBFBbbjRfSYbsJprLYboxtpx1Fj23esXoMhqlx7rB9uR2OPxP/aCMDmX61/Vhm8cha7HA91bzbWUR1z0/m8tLUKSyJ1qWNHqeXrTUf16lb76Or6XIzTmWFA4mHyeLOkUS3+H23UpJQPAnbE0bUS2CSUi6IdWM13Mhpu/OlBUE1t/YbA1QYCeWLYVsrRh+SeDm0RCQEf9pxa3Xpds4RcpJhqNVDbXPkzqTpOJcK/mT1VO17gUtn57C3J3cpMlUucW77Px3hRwZ83VJFGvriJ6YRHJboLmnWPUNXWAC7FbQg+/0IrjUL4RMFBxhYkEdSBLxiXB0xD8TkEZorywPXoP0I/jxhXGzWKEoJUFgeiTvs3srq2eO9Hq2Aeq92S9eDIgeYwIeawKoVY+KyVOumuBmpY0r+CgrgQVn7ohl9n6aIoc4TJjB0lEDWvmaGa05ETrGfPRd3lm1jI64b9SKtBJlbhAFTgEhuqWoUvlhCFdwRBW613cNWqnGYyDAdj+OQfdnugpBWHUa14jAKbbN2tlDrfR6mXUT9p7F3peyGvHNBb0UCl933GHgmyN6Hc/0R6+KZxiG7Ba6ReJjg6RiAos0DpTRsHWNz1s284Mr58DI+UF52N8B7vyIGzP4+nGJcWLXiNMtiR0/0S0BPtExAj3ZNwE42zh11e6duTZS/YlZaK6DebfrkOsb4aURMnsqiA+viHpPowDrwsoX1y6moRTZ20cMXtmpOgFYf8sGd8kFrRw4ptuCQagu2lJvwmpXEUu2DNSlOoEf12vY4aXOZkG6WY8OC4hzrwHRcjVhWepjd4KdYKK7jrx5H89WjRxPWoycydlS3jZ/I2VS/G9yp9gB6PG1T1aY4YAp3LfPHPPqABbtFRHS/jf34/T82FAfb"
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
"eJxtmNtu20YQhl+F4FULyMGeD7pz3AY1ChtG7NpFA18w1NomIlECSRcxgrx7SVk7+wOdG8H5OJydf2Z2d5gf9cV+t0v9VK/r+6vXsXlOlbHe28paq229qj/t++m62aXZ4J/m8PRb1z9/baZxefK63Z6eXN5dVMvTCh83u277xr/6kLrnl2XNq7TpXnczuZyabdee98/b2VzM/x4/dd/T5qab2pd6PQ2vaVVfvDRD005puE3Lu7eH1HbN9hTjx4/77/X6y5lcnUmjVzHIVVDicVX/1W/SsO36dLMfu6nb9/X6TAoBD+5euvZbn8axXtuZ36dhPJrVQqgPQoh5hev91LWLkIv94W1Ygq9+aX+tZAx2tfz64284/sblN/rqfLP/mqrbt3FKu7G67Nv9cNgPzZQ2H6rz7bb6vLgZq89pTMO/M/xfEqturJpqSM/d7GJIm2oamk3aNcO3av80O5xh3yyKmm1193ZIT02bqovTKjP+MAf++7zsZvZ3276kYyWWXB0z99S18/PbafPHQ71W4fjn/fxnFO+ZvkrT0LVzTr78qB/+nk38bHM9exgP8zr1z9U7jt6840YW5uSJKcZOCaBBnKgm5mU8MVNYyMwWFvO7Ukagkmgg6sDWQ5yFFqjzUrLEaQ3BEmiwNsMSaZS0vgWfOkPHWQowNeTUc0kumnxZvsgPxlGai6VTGUqAVCTQ6QkWnc77DKEiLktSUBJKqHIQZ86d8gCpHYoiEzMsb1ubYy8vW50DChB5ZhGqrijD0EqUIeiaEHIfCg5Kpuu0ApiToaGPSY0uaQsyr65L2oKi1yFt1PLaQ3lzfXTgXodGoJYzglndSLDMPg1sTPJpQJHJigw0QrGERqD9YhyTOgONQDUyuF1zaxuokc/BW2ztXCMrGZ9WMW1oQZHIXWNBkSCfRZEL5BMUiZw6CzVSFCfUSGZFNjIldoKDkonTKQiJIGzWmFd3BizJJ9SINoLDriOfUCOZS+zg+KGD1qGiLNMLxtJD1/ns00ON6EzyUCM6vbxhoBKaqbG3DFQCNiL1iHccBPV0DHhQH/JW8EW90dkyFKGywCJU0WkVSvSGeiSUODWFFD0HYdPQVoiRgfPMA+/nnRgiAyNYSjpWNQcNSMrtFCUH4ZIRpSCWocFCSuhCEY6hoUClc0WC52BJlCYYLQdhN+hygRRRlo5BKRRLS6oihSqh+ZzzRGG1Mo4Iz1LoP0qsxDGFzk0JE42ji0jCPejomJKCuwil4m5CiRMEUMVSzVLDUstSx1Juc0oVWMpqY295qVltmtWmWW2a1aZZbZrVplltmtWmWW2G1WZYbYbVZlhthtVmWG2G1WZYbYbVZlhtltVmWW2W1WZZbZbVZlltltVmWW2W1QYjQCh7E2aAQHeGhCFgPoNoy8KNb2wxBhmGKBxoUZXlLGsLI6AsftEDHV0wIURVbANLcTKlGGBIKPOAxCmhePCKUwFzAmpDFRQvjA9R06Hq8TONvshgKDCuRAZTXigUxjxNFfKRo3CLhnIJBMFRvMZpqpNBMlQJzGT5WFQMVQI/AikPMIhEU1aDjqJvQwmjSHB05cC9jbYwc5UtAHNLhDw41ha+lEqF4JaH3gmB61SYcqInxTDmQK8v08vjqv4zDf1N0w3Lf4A8/vwPpfK11w=="
|
||||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './Font';
|
||||||
|
export * from './Encoding';
|
||||||
+7
@@ -0,0 +1,7 @@
|
|||||||
|
"use strict";
|
||||||
|
function __export(m) {
|
||||||
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
||||||
|
}
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
__export(require("./Font"));
|
||||||
|
__export(require("./Encoding"));
|
||||||
+3
@@ -0,0 +1,3 @@
|
|||||||
|
export declare const decodeFromBase64: (base64: string) => Uint8Array;
|
||||||
|
export declare const decompressJson: (compressedJson: string) => string;
|
||||||
|
export declare const padStart: (value: string, length: number, padChar: string) => string;
|
||||||
+67
@@ -0,0 +1,67 @@
|
|||||||
|
"use strict";
|
||||||
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||||||
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||||||
|
};
|
||||||
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||||||
|
/*
|
||||||
|
* The `chars`, `lookup`, and `decodeFromBase64` members of this file are
|
||||||
|
* licensed under the following:
|
||||||
|
*
|
||||||
|
* base64-arraybuffer
|
||||||
|
* https://github.com/niklasvh/base64-arraybuffer
|
||||||
|
*
|
||||||
|
* Copyright (c) 2012 Niklas von Hertzen
|
||||||
|
* Licensed under the MIT license.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
var pako_1 = __importDefault(require("pako"));
|
||||||
|
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
|
||||||
|
// Use a lookup table to find the index.
|
||||||
|
var lookup = new Uint8Array(256);
|
||||||
|
for (var i = 0; i < chars.length; i++) {
|
||||||
|
lookup[chars.charCodeAt(i)] = i;
|
||||||
|
}
|
||||||
|
exports.decodeFromBase64 = function (base64) {
|
||||||
|
var bufferLength = base64.length * 0.75;
|
||||||
|
var len = base64.length;
|
||||||
|
var i;
|
||||||
|
var p = 0;
|
||||||
|
var encoded1;
|
||||||
|
var encoded2;
|
||||||
|
var encoded3;
|
||||||
|
var encoded4;
|
||||||
|
if (base64[base64.length - 1] === '=') {
|
||||||
|
bufferLength--;
|
||||||
|
if (base64[base64.length - 2] === '=') {
|
||||||
|
bufferLength--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var bytes = new Uint8Array(bufferLength);
|
||||||
|
for (i = 0; i < len; i += 4) {
|
||||||
|
encoded1 = lookup[base64.charCodeAt(i)];
|
||||||
|
encoded2 = lookup[base64.charCodeAt(i + 1)];
|
||||||
|
encoded3 = lookup[base64.charCodeAt(i + 2)];
|
||||||
|
encoded4 = lookup[base64.charCodeAt(i + 3)];
|
||||||
|
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
|
||||||
|
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
|
||||||
|
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
|
||||||
|
}
|
||||||
|
return bytes;
|
||||||
|
};
|
||||||
|
var arrayToString = function (array) {
|
||||||
|
var str = '';
|
||||||
|
for (var i = 0; i < array.length; i++) {
|
||||||
|
str += String.fromCharCode(array[i]);
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
exports.decompressJson = function (compressedJson) {
|
||||||
|
return arrayToString(pako_1.default.inflate(exports.decodeFromBase64(compressedJson)));
|
||||||
|
};
|
||||||
|
exports.padStart = function (value, length, padChar) {
|
||||||
|
var padding = '';
|
||||||
|
for (var idx = 0, len = length - value.length; idx < len; idx++) {
|
||||||
|
padding += padChar;
|
||||||
|
}
|
||||||
|
return padding + value;
|
||||||
|
};
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "@pdf-lib/standard-fonts",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Metrics for the Standard 14 PDF fonts and their encodings",
|
||||||
|
"main": "lib/index.js",
|
||||||
|
"unpkg": "dist/standard-fonts.min.js",
|
||||||
|
"module": "es/index.js",
|
||||||
|
"types": "lib/index.d.ts",
|
||||||
|
"scripts": {
|
||||||
|
"make": "node Makefile.js",
|
||||||
|
"lint": "node Makefile.js lint",
|
||||||
|
"clean": "node Makefile.js clean",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
|
"afmToJson": "node Makefile.js afmToJson",
|
||||||
|
"encodingsToJson": "node Makefile.js encodingsToJson",
|
||||||
|
"releaseNext": "node Makefile.js releaseNext",
|
||||||
|
"releaseLatest": "node Makefile.js releaseLatest"
|
||||||
|
},
|
||||||
|
"repository": "https://github.com/Hopding/standard-fonts.git",
|
||||||
|
"keywords": [
|
||||||
|
"afm",
|
||||||
|
"adobe",
|
||||||
|
"font",
|
||||||
|
"metrics",
|
||||||
|
"ascii",
|
||||||
|
"pdf"
|
||||||
|
],
|
||||||
|
"author": "Andrew Dillon <andrew.dillon.j@gmail.com>",
|
||||||
|
"contributors": [
|
||||||
|
"Christopher Brown <io@henrian.com> (http://henrian.com)"
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"homepage": "https://github.com/Hopding/standard-fonts",
|
||||||
|
"dependencies": {
|
||||||
|
"pako": "^1.0.6"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/mz": "^0.0.32",
|
||||||
|
"@types/node": "^10.5.1",
|
||||||
|
"@types/pako": "^1.0.0",
|
||||||
|
"base64-arraybuffer": "^0.1.5",
|
||||||
|
"mz": "^2.7.0",
|
||||||
|
"prettier": "^1.15.3",
|
||||||
|
"rollup": "^0.68.2",
|
||||||
|
"rollup-plugin-commonjs": "^9.2.0",
|
||||||
|
"rollup-plugin-json": "^3.1.0",
|
||||||
|
"rollup-plugin-node-resolve": "^4.0.0",
|
||||||
|
"rollup-plugin-terser": "^3.0.0",
|
||||||
|
"shelljs": "^0.8.3",
|
||||||
|
"ts-node": "^7.0.1",
|
||||||
|
"tslint": "^5.12.0",
|
||||||
|
"tslint-config-prettier": "^1.17.0",
|
||||||
|
"typescript": "^2.9.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2017 Photopea
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
+143
@@ -0,0 +1,143 @@
|
|||||||
|
<h1>
|
||||||
|
upng
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<!-- NPM Version -->
|
||||||
|
<a href="https://www.npmjs.com/package/@pdf-lib/upng">
|
||||||
|
<img
|
||||||
|
src="https://img.shields.io/npm/v/png-ts.svg?style=flat-square"
|
||||||
|
alt="NPM Version"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
> A small, fast and advanced PNG / APNG encoder and decoder
|
||||||
|
|
||||||
|
This project is a fork of [`UPNG.js`](https://github.com/photopea/UPNG.js) and was created for use in [`pdf-lib`](https://github.com/Hopding/pdf-lib). The maintainer of the original repo does not publish it to NPM. That is the primary purpose of this fork. In addition, an `index.d.ts` file has been added (copied directly from [`@types/upng-js`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/upng-js/index.d.ts)) to makes TypeScript definitions available without requiring additional packages to be installed.
|
||||||
|
|
||||||
|
## Example of `UPNG.toRGBA8`
|
||||||
|
```javascript
|
||||||
|
// Import the UPNG class
|
||||||
|
import UPNG from '@pdf-lib/upng';
|
||||||
|
|
||||||
|
// Create a UPNG object
|
||||||
|
const pngImage = UPNG.decode(/* Uint8Array containing bytes of PNG image */);
|
||||||
|
|
||||||
|
// `pixels` is a 1D array (in rgba order) of decoded pixel data
|
||||||
|
const pixels = pngImage.UPNG.toRGBA8();
|
||||||
|
```
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
### NPM Module
|
||||||
|
To install the latest stable version:
|
||||||
|
```bash
|
||||||
|
# With npm
|
||||||
|
npm install --save @pdf-lib/upng
|
||||||
|
|
||||||
|
# With yarn
|
||||||
|
yarn add @pdf-lib/upng
|
||||||
|
```
|
||||||
|
This assumes you're using [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/lang/en/) as your package manager.
|
||||||
|
|
||||||
|
### UMD Module
|
||||||
|
You can also download `@pdf-lib/upng` as a UMD module from [unpkg](https://unpkg.com/#/). The UMD builds have been compiled to ES5, so they should work [in any modern browser](https://caniuse.com/#feat=es5). UMD builds are useful if you aren't using a package manager or module bundler. For example, you can use them directly in the `<script>` tag of an HTML page.
|
||||||
|
|
||||||
|
The following builds are available:
|
||||||
|
|
||||||
|
* https://unpkg.com/@pdf-lib/upng/dist/UPNG.js
|
||||||
|
* https://unpkg.com/@pdf-lib/upng/dist/UPNG.min.js
|
||||||
|
|
||||||
|
When using a UMD build, you will have access to a global `window.UPNG` variable. This variable contains the `UPNG` class exported by `@pdf-lib/upng`. For example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// NPM module
|
||||||
|
import UPNG from '@pdf-lib/upng';
|
||||||
|
const pngImage = UPNG.decode(/* ... */)
|
||||||
|
|
||||||
|
// UMD module
|
||||||
|
var pngImage = window.UPNG.decode(/* ... */)
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Encoder
|
||||||
|
|
||||||
|
UPNG.js supports APNG and the interface expects "frames". Regular PNG is just a single-frame animation (single-item array).
|
||||||
|
|
||||||
|
#### `UPNG.encode(imgs, w, h, cnum, [dels])`
|
||||||
|
* `imgs`: array of frames. A frame is an ArrayBuffer containing the pixel data (RGBA, 8 bits per channel)
|
||||||
|
* `w`, `h` : width and height of the image
|
||||||
|
* `cnum`: number of colors in the result; 0: all colors (lossless PNG)
|
||||||
|
* `dels`: array of millisecond delays for each frame (only when 2 or more frames)
|
||||||
|
* returns an ArrayBuffer with binary data of a PNG file
|
||||||
|
|
||||||
|
UPNG.js can do a lossy minification of PNG files, similar to [TinyPNG](https://tinypng.com/) and other tools. It performed quantization with [k-means algorithm](https://en.wikipedia.org/wiki/K-means_clustering) in the past, but now we use [K-d trees](https://en.wikipedia.org/wiki/K-d_tree).
|
||||||
|
|
||||||
|
Lossy compression is allowed by the last parameter `cnum`. Set it to zero for a lossless compression, or write the number of allowed colors in the image. Smaller values produce smaller files. **Or just use 0 for lossless / 256 for lossy.**
|
||||||
|
|
||||||
|
// Read RGBA from canvas and encode with UPNG
|
||||||
|
var dta = ctx.getImageData(0,0,200,300).data; // ctx is Context2D of a Canvas
|
||||||
|
// dta = new Uint8Array(200 * 300 * 4); // or generate pixels manually
|
||||||
|
var png = UPNG.encode([dta.buffer], 200, 300, 0); console.log(new Uint8Array(png));
|
||||||
|
|
||||||
|
#### `UPNG.encodeLL(imgs, w, h, cc, ac, depth, [dels])` - low-level encode
|
||||||
|
* `imgs`: array of frames. A frame is an ArrayBuffer containing the pixel data (corresponding to following parameters)
|
||||||
|
* `w`, `h` : width and height of the image
|
||||||
|
* `cc`, `ac`: number of color channels (1 or 3) and alpha channels (0 or 1)
|
||||||
|
* `depth`: bit depth of pixel data (1, 2, 4, 8, 16)
|
||||||
|
* `dels`: array of millisecond delays for each frame (only when 2 or more frames)
|
||||||
|
* returns an ArrayBuffer with binary data of a PNG file
|
||||||
|
|
||||||
|
This function does not do any optimizations, it just stores what you give it. There are two cases when it is useful:
|
||||||
|
* saving 16-bit colors (note, that PNG is big-endian, unlike Uint16Array in JS)
|
||||||
|
* your image is too large, and "expanding" to 8-bit RGBA would use too much memory (e.g. 4-bit grayscale 50,000 x 50,000 = 1.25 GB, 8-bit RGBA would be 10 GB)
|
||||||
|
|
||||||
|
## Decoder
|
||||||
|
|
||||||
|
Supports all color types (including Grayscale and Palettes), all channel depths (1, 2, 4, 8, 16), interlaced images etc. Opens PNGs which other libraries can not open (tested with [PngSuite](http://www.schaik.com/pngsuite/)).
|
||||||
|
|
||||||
|
#### `UPNG.decode(buffer)`
|
||||||
|
* `buffer`: ArrayBuffer containing the PNG file
|
||||||
|
* returns an image object with following properties:
|
||||||
|
* * `width`: the width of the image
|
||||||
|
* * `height`: the height of the image
|
||||||
|
* * `depth`: number of bits per channel
|
||||||
|
* * `ctype`: color type of the file (Truecolor, Grayscale, Palette ...)
|
||||||
|
* * `frames`: additional info about frames (frame delays etc.)
|
||||||
|
* * `tabs`: additional chunks of the PNG file
|
||||||
|
* * `data`: pixel data of the image
|
||||||
|
|
||||||
|
PNG files may have a various number of channels and a various color depth. The interpretation of `data` depends on the current color type and color depth (see the [PNG specification](https://www.w3.org/TR/PNG/)).
|
||||||
|
|
||||||
|
#### `UPNG.toRGBA8(img)`
|
||||||
|
* `img`: PNG image object (returned by UPNG.decode())
|
||||||
|
* returns an array of frames. A frame is ArrayBuffer of the image in RGBA format, 8 bits per channel.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
var img = UPNG.decode(buff); // put ArrayBuffer of the PNG file into UPNG.decode
|
||||||
|
var rgba = UPNG.toRGBA8(img)[0]; // UPNG.toRGBA8 returns array of frames, size: width * height * 4 bytes.
|
||||||
|
|
||||||
|
PNG format uses the Inflate algorithm. Right now, UPNG.js calls [Pako.js](https://github.com/nodeca/pako) for the Inflate and Deflate method.
|
||||||
|
|
||||||
|
## Quantizer
|
||||||
|
|
||||||
|
UPNG.js contains a very good Quantizer of 4-component 8-bit vectors (i.e. pixels). It can be used to generate nice color palettes (e.g. Photopea uses UPNG.js to make palettes for GIF images).
|
||||||
|
|
||||||
|
Quantization consists of two important steps: Finding a nice palette and Finding the closest color in the palette for each sample (non-trivial for large palettes). UPNG perfroms both steps.
|
||||||
|
|
||||||
|
var res = UPNG.quantize(data, psize);
|
||||||
|
|
||||||
|
* `data`: ArrayBuffer of samples (byte length is a multiple of four)
|
||||||
|
* `psize` : Palette size (how many colors you want to have)
|
||||||
|
|
||||||
|
The result object "res" has following properties:
|
||||||
|
|
||||||
|
* `abuf`: ArrayBuffer corresponding to `data`, where colors are remapped by a palette
|
||||||
|
* `inds`: Uint8Array : the index of a color for each sample (only when `psize`<=256)
|
||||||
|
* `plte`: Array : the Palette - a list of colors, `plte[i].est.q` and `plte[i].est.rgba` is the color value
|
||||||
|
|
||||||
|
### FAQ
|
||||||
|
|
||||||
|
- To get one common palette for multiple images (e.g. frames of the animation), concatenate them into one array `data`.
|
||||||
|
- When working with less than four components, set the remaining components to a constant value (e.g. to zero)
|
||||||
|
- When working with transparency, premultiply color components by transparency (otherwise, rgba(1,1,1,0) would be closer to rgba(1,1,1,1) than to rgba(0,0,0,0) - transparent mapped to white instead of transparent)
|
||||||
+1027
File diff suppressed because it is too large
Load Diff
+2017
File diff suppressed because it is too large
Load Diff
+7832
File diff suppressed because it is too large
Load Diff
+7832
File diff suppressed because it is too large
Load Diff
+88
@@ -0,0 +1,88 @@
|
|||||||
|
// ------------------------------------------- //
|
||||||
|
// //
|
||||||
|
// Copied from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/upng-js/index.d.ts
|
||||||
|
// //
|
||||||
|
// ------------------------------------------- //
|
||||||
|
|
||||||
|
// Type definitions for upng-js 2.1
|
||||||
|
// Project: https://github.com/photopea/UPNG.js
|
||||||
|
// Definitions by: York Yao <https://github.com/plantain-00>, Sophie Kirschner <https://github.com/pineapplemachine>
|
||||||
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||||
|
|
||||||
|
export interface ImageFrameRect {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageFrame {
|
||||||
|
rect: ImageFrameRect;
|
||||||
|
delay: number;
|
||||||
|
dispose: number;
|
||||||
|
blend: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageTabACTL {
|
||||||
|
num_frames: number;
|
||||||
|
num_plays: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageTabText {
|
||||||
|
[key: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ImageTabs {
|
||||||
|
acTL?: ImageTabACTL;
|
||||||
|
pHYs?: number[];
|
||||||
|
cHRM?: number[];
|
||||||
|
tEXt?: ImageTabText;
|
||||||
|
iTXt?: ImageTabText;
|
||||||
|
PLTE?: number[];
|
||||||
|
hIST?: number[];
|
||||||
|
tRNS?: number | number[]; // Depends on ctype
|
||||||
|
gAMA?: number;
|
||||||
|
sRGB?: number;
|
||||||
|
bKGD?: number | number[]; // Depends on ctype
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Image {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
depth: number;
|
||||||
|
ctype: number;
|
||||||
|
frames: ImageFrame[];
|
||||||
|
tabs: ImageTabs;
|
||||||
|
data: ArrayBuffer;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface QuantizeResult {
|
||||||
|
abuf: ArrayBuffer;
|
||||||
|
inds: Uint8Array;
|
||||||
|
// Type is complicated and I am too lazy to work it out right now, sorry!
|
||||||
|
plte: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function encode(
|
||||||
|
imgs: ArrayBuffer[],
|
||||||
|
w: number,
|
||||||
|
h: number,
|
||||||
|
cnum: number,
|
||||||
|
dels?: number[],
|
||||||
|
): ArrayBuffer;
|
||||||
|
|
||||||
|
export function encodeLL(
|
||||||
|
imgs: ArrayBuffer[],
|
||||||
|
w: number,
|
||||||
|
h: number,
|
||||||
|
cc: number,
|
||||||
|
ac: number,
|
||||||
|
depth: number,
|
||||||
|
dels?: number[],
|
||||||
|
): ArrayBuffer;
|
||||||
|
|
||||||
|
export function decode(buffer: ArrayBuffer): Image;
|
||||||
|
|
||||||
|
export function toRGBA8(out: Image): ArrayBuffer[];
|
||||||
|
|
||||||
|
export function quantize(data: ArrayBuffer, psize: number): QuantizeResult;
|
||||||
+54
@@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"name": "@pdf-lib/upng",
|
||||||
|
"license": "MIT",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"description": "Small, fast and advanced PNG / APNG encoder and decoder",
|
||||||
|
"main": "cjs/UPNG.js",
|
||||||
|
"unpkg": "dist/UPNG.min.js",
|
||||||
|
"module": "UPNG.js",
|
||||||
|
"types": "index.d.ts",
|
||||||
|
"files": [
|
||||||
|
"cjs/",
|
||||||
|
"dist/",
|
||||||
|
"UPNG.js",
|
||||||
|
"index.d.ts",
|
||||||
|
"LICENSE.md",
|
||||||
|
"package.json",
|
||||||
|
"README.md",
|
||||||
|
"yarn.lock"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"build": "yarn build:cjs && yarn build:umd && yarn build:umd:min",
|
||||||
|
"build:cjs": "babel --plugins @babel/plugin-transform-modules-commonjs --out-dir cjs UPNG.js",
|
||||||
|
"build:umd": "rollup --config rollup.config.js --file dist/UPNG.js",
|
||||||
|
"build:umd:min": "rollup --config rollup.config.js --file dist/UPNG.min.js --environment MINIFY"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/Hopding/upng"
|
||||||
|
},
|
||||||
|
"author": "photopea (https://github.com/photopea)",
|
||||||
|
"contributors": [
|
||||||
|
"Andrew Dillon (https://github.com/Hopding)",
|
||||||
|
"Scimonster (https://github.com/Scimonster)"
|
||||||
|
],
|
||||||
|
"bugs": "https://github.com/Hopding/upng/issues",
|
||||||
|
"keywords": [
|
||||||
|
"png",
|
||||||
|
"apng",
|
||||||
|
"image",
|
||||||
|
"conversion"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"pako": "^1.0.10"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/cli": "^7.8.4",
|
||||||
|
"@babel/core": "^7.8.4",
|
||||||
|
"@babel/plugin-transform-modules-commonjs": "^7.8.3",
|
||||||
|
"@rollup/plugin-commonjs": "^11.0.0",
|
||||||
|
"@rollup/plugin-node-resolve": "^7.1.1",
|
||||||
|
"rollup": "^1.31.1",
|
||||||
|
"rollup-plugin-terser": "^5.1.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user