1558 lines
101 KiB
HTML
1558 lines
101 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>关于我们 - 隼瞻科技</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&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>
|
|
/* ========== 基础动画 ========== */
|
|
@keyframes gradientFlow {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
@keyframes floatSlow {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
50% { transform: translateY(-10px) rotate(5deg); }
|
|
}
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.8); opacity: 0.5; }
|
|
50% { transform: scale(1.2); opacity: 0; }
|
|
100% { transform: scale(0.8); opacity: 0.5; }
|
|
}
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(40px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes fadeInLeft {
|
|
from { opacity: 0; transform: translateX(-40px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes fadeInRight {
|
|
from { opacity: 0; transform: translateX(40px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.8); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes dotPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(22,93,255,0.4); }
|
|
50% { box-shadow: 0 0 0 12px rgba(22,93,255,0); }
|
|
}
|
|
@keyframes rotate360 {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@keyframes particleFloat {
|
|
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
|
|
25% { transform: translate(30px, -20px) scale(1.1); opacity: 0.8; }
|
|
50% { transform: translate(-10px, -40px) scale(0.9); opacity: 0.4; }
|
|
75% { transform: translate(-30px, -10px) scale(1.05); opacity: 0.7; }
|
|
}
|
|
|
|
.gradient-animate {
|
|
background-size: 200% 200%;
|
|
animation: gradientFlow 15s ease infinite;
|
|
}
|
|
|
|
/* ========== 滚动触发动画 ========== */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.reveal-left {
|
|
opacity: 0;
|
|
transform: translateX(-60px);
|
|
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.reveal-left.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.reveal-right {
|
|
opacity: 0;
|
|
transform: translateX(60px);
|
|
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.reveal-right.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.reveal-scale {
|
|
opacity: 0;
|
|
transform: scale(0.85);
|
|
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.reveal-scale.active {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* ========== 粒子 ========== */
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
.particle-1 { width: 4px; height: 4px; background: rgba(22,93,255,0.3); animation: particleFloat 12s infinite; }
|
|
.particle-2 { width: 6px; height: 6px; background: rgba(105,177,255,0.2); animation: particleFloat 15s infinite 2s; }
|
|
.particle-3 { width: 3px; height: 3px; background: rgba(22,93,255,0.4); animation: particleFloat 10s infinite 4s; }
|
|
.particle-4 { width: 5px; height: 5px; background: rgba(105,177,255,0.15); animation: particleFloat 18s infinite 1s; }
|
|
.particle-5 { width: 4px; height: 4px; background: rgba(22,93,255,0.25); animation: particleFloat 14s infinite 3s; }
|
|
|
|
/* ========== Canvas ========== */
|
|
#particle-canvas {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ========== 装饰图案 ========== */
|
|
.circuit-pattern {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80H10z' fill='none' stroke='%23165DFF' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23165DFF' fill-opacity='0.08'/%3E%3Ccircle cx='90' cy='10' r='2' fill='%23165DFF' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='90' r='2' fill='%23165DFF' fill-opacity='0.08'/%3E%3Ccircle cx='90' cy='90' r='2' fill='%23165DFF' fill-opacity='0.08'/%3E%3Cpath d='M50 10v80M10 50h80' stroke='%23165DFF' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E");
|
|
}
|
|
.hex-pattern {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23165DFF' stroke-opacity='0.06' stroke-width='0.5' transform='translate(0,-4)'/%3E%3C/svg%3E");
|
|
}
|
|
.dot-pattern {
|
|
background-image: radial-gradient(circle, rgba(22,93,255,0.08) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
|
|
/* ========== 标签页 ========== */
|
|
.tab-btn {
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
-webkit-tap-highlight-color: transparent !important; /* 消除移动端点击的高亮遮罩 */
|
|
outline: none !important; /* 防止WP主题默认的蓝色焦点框 */
|
|
box-shadow: none !important;
|
|
}
|
|
.tab-btn:focus, .tab-btn:active {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
background-color: transparent; /* 防止出现浓浓的蓝色背景 */
|
|
}
|
|
.tab-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 2px;
|
|
background: #165DFF;
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-50%);
|
|
}
|
|
.tab-btn.active::after {
|
|
width: 100%;
|
|
}
|
|
.tab-btn.active {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ========== 卡片悬浮 ========== */
|
|
.hover-card {
|
|
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
.hover-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 60px rgba(22,93,255,0.15);
|
|
}
|
|
|
|
/* ========== 旋转装饰环 ========== */
|
|
.orbit-ring {
|
|
position: absolute;
|
|
border: 1px solid rgba(22,93,255,0.1);
|
|
border-radius: 50%;
|
|
animation: rotate360 30s linear infinite;
|
|
}
|
|
.orbit-ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #165DFF;
|
|
border-radius: 50%;
|
|
top: -3px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: 0 0 10px rgba(22,93,255,0.5);
|
|
}
|
|
|
|
/* ========== 核心技术卡片光效 ========== */
|
|
.tech-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.tech-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(22,93,255,0.05), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
.tech-card:hover::after {
|
|
left: 100%;
|
|
}
|
|
|
|
/* ========== 时间线 ========== */
|
|
.timeline-line {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, transparent, #165DFF 10%, #165DFF 90%, transparent);
|
|
transform: translateX(-50%);
|
|
}
|
|
.timeline-line-animated {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 0;
|
|
background: linear-gradient(to bottom, #165DFF, #69b1ff);
|
|
transform: translateX(-50%);
|
|
transition: height 2s ease;
|
|
}
|
|
.timeline-line-animated.active {
|
|
height: 100%;
|
|
}
|
|
.timeline-dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: #165DFF;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
box-shadow: 0 0 0 4px rgba(22,93,255,0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.timeline-dot:hover {
|
|
animation: dotPulse 1.5s infinite;
|
|
transform: translateX(-50%) scale(1.3);
|
|
}
|
|
.timeline-card {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 12px;
|
|
padding: 20px 24px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
.timeline-card:hover {
|
|
border-color: rgba(22,93,255,0.4);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
}
|
|
.timeline-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20px;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: #334155;
|
|
}
|
|
.timeline-card-left::before {
|
|
right: -20px;
|
|
}
|
|
.timeline-card-right::before {
|
|
left: -20px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.timeline-line, .timeline-line-animated {
|
|
left: 20px;
|
|
}
|
|
.timeline-dot {
|
|
left: 20px;
|
|
}
|
|
.timeline-card::before {
|
|
left: -20px !important;
|
|
right: auto !important;
|
|
}
|
|
}
|
|
|
|
/* ========== 数字统计 ========== */
|
|
.stat-number {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ========== 知识产权图片网格 ========== */
|
|
.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);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.ip-grid-item:hover {
|
|
border-color: rgba(22,93,255,0.4);
|
|
transform: translateY(-3px);
|
|
}
|
|
.ip-grid-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
aspect-ratio: 4/3;
|
|
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;
|
|
}
|
|
|
|
/* ========== Tab内容动画 ========== */
|
|
.tab-content {
|
|
animation: fadeInUp 0.5s ease;
|
|
}
|
|
.tab-content.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* ========== 滚动条 ========== */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: #0f172a; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
|
|
/* 隐藏横向滚动条 */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
</style>
|
|
</head>
|
|
<body class="font-inter bg-[#0f172a] text-gray-200 min-h-screen flex flex-col">
|
|
|
|
<!-- ==================== HERO SECTION ==================== -->
|
|
<section class="relative pt-24 md:pt-32 pb-20 md:pb-32 overflow-hidden">
|
|
<!-- 粒子Canvas背景 -->
|
|
<canvas id="particle-canvas"></canvas>
|
|
<!-- 渐变背景 -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-[#0f172a] via-[#1e293b] to-[#0f172a] gradient-animate"></div>
|
|
<!-- 电路纹理 -->
|
|
<div class="absolute inset-0 circuit-pattern opacity-30"></div>
|
|
<!-- 装饰性光环 -->
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px]">
|
|
<div class="orbit-ring w-full h-full"></div>
|
|
<div class="orbit-ring w-[80%] h-[80%] top-[10%] left-[10%]" style="animation-duration:20s;animation-direction:reverse;"></div>
|
|
<div class="orbit-ring w-[60%] h-[60%] top-[20%] left-[20%]" style="animation-duration:25s;"></div>
|
|
</div>
|
|
<!-- 浮动粒子 -->
|
|
<div class="particle particle-1" style="top:15%;left:10%;"></div>
|
|
<div class="particle particle-2" style="top:25%;left:80%;"></div>
|
|
<div class="particle particle-3" style="top:60%;left:15%;"></div>
|
|
<div class="particle particle-4" style="top:70%;left:75%;"></div>
|
|
<div class="particle particle-5" style="top:40%;left:90%;"></div>
|
|
<div class="particle particle-1" style="top:80%;left:50%;"></div>
|
|
<div class="particle particle-3" style="top:10%;left:45%;"></div>
|
|
<div class="particle particle-2" style="top:50%;left:30%;"></div>
|
|
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<div class="inline-block mb-6 px-4 py-2 bg-primary/10 border border-primary/20 rounded-full text-primary text-sm font-medium" style="animation: fadeInUp 0.6s ease both;">
|
|
<i class="fa fa-building-o mr-2"></i>WingSemi Technology
|
|
</div>
|
|
<h1 class="text-[clamp(2.2rem,5vw,4rem)] font-extrabold text-white leading-tight mb-6" style="animation: fadeInUp 0.8s ease both 0.1s;">
|
|
关于<span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">隼瞻科技</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed" style="animation: fadeInUp 0.8s ease both 0.2s;">
|
|
聚焦DSA处理器设计创新，打造基于RISC-V技术体系的高性能解决方案
|
|
</p>
|
|
<div class="flex justify-center gap-6 flex-wrap" style="animation: fadeInUp 0.8s ease both 0.3s;">
|
|
<div class="flex items-center gap-2 text-gray-400">
|
|
<div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
|
<span class="text-sm">DSA专用指令集架构</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-400">
|
|
<div class="w-2 h-2 bg-blue-400 rounded-full animate-pulse" style="animation-delay:0.5s;"></div>
|
|
<span class="text-sm">RISC-V技术体系</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-gray-400">
|
|
<div class="w-2 h-2 bg-purple-400 rounded-full animate-pulse" style="animation-delay:1s;"></div>
|
|
<span class="text-sm">模块化解决方案</span>
|
|
</div>
|
|
</div>
|
|
<!-- 向下滚动提示 -->
|
|
<div class="mt-16 animate-bounce" style="animation: fadeInUp 0.8s ease both 0.5s;">
|
|
<a href="#about-content" class="text-gray-500 hover:text-primary transition-colors">
|
|
<i class="fa fa-chevron-down text-2xl"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== TAB 导航 ==================== -->
|
|
<section class="py-4 bg-[#1e293b]/80 backdrop-blur-md sticky top-16 z-40 border-b border-gray-700/50">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<div class="flex overflow-x-auto no-scrollbar gap-2 md:justify-center">
|
|
<button class="tab-btn active whitespace-nowrap py-3 px-5 text-sm font-medium text-white rounded-lg hover:bg-white/5 transition-all" data-tab="company-profile">
|
|
<i class="fa fa-building-o mr-2"></i>公司简介
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-5 text-sm font-medium text-gray-400 rounded-lg hover:bg-primary/5 transition-all" data-tab="vision">
|
|
<i class="fa fa-compass mr-2"></i>愿景使命
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-5 text-sm font-medium text-gray-400 rounded-lg hover:bg-primary/5 transition-all" data-tab="ip">
|
|
<i class="fa fa-shield mr-2"></i>知识产权
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-5 text-sm font-medium text-gray-400 rounded-lg hover:bg-primary/5 transition-all" data-tab="history">
|
|
<i class="fa fa-clock-o mr-2"></i>发展历程
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-5 text-sm font-medium text-gray-400 rounded-lg hover:bg-primary/5 transition-all" data-tab="culture">
|
|
<i class="fa fa-heart mr-2"></i>企业文化
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== 内容区域 ==================== -->
|
|
<section id="about-content" class="py-16 md:py-24 bg-[#1e293b] relative">
|
|
<!-- 背景装饰 -->
|
|
<div class="absolute inset-0 dot-pattern opacity-30"></div>
|
|
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
|
|
|
|
<!-- ========== 公司简介 ========== -->
|
|
<div id="company-profile" class="tab-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-20">
|
|
<!-- 左侧文字 -->
|
|
<div class="reveal-left">
|
|
<div class="inline-block px-3 py-1 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
|
ABOUT WINGSEMI
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-8 text-white leading-tight">
|
|
聚焦DSA处理器<br/>
|
|
<span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">设计创新</span>
|
|
</h2>
|
|
<p class="text-gray-300 mb-6 leading-relaxed text-[15px]">
|
|
隼瞻科技是一家聚焦DSA处理器设计创新的高科技企业，致力于打造基于 DSA（专用指令集架构）的RISC-V技术体系。公司依托三大核心技术板块 -- 自主研发的RISC-V处理器核、高效敏捷的DSA处理器敏捷开发平台，以及可灵活定制适配多元模型的NPU模块，构建起高度模块化的解决方案体系。
|
|
</p>
|
|
<p class="text-gray-300 mb-8 leading-relaxed text-[15px]">
|
|
通过自由组合的产品架构，精准响应AIOT、DSP、5G 网络、汽车电子、人工智能等复杂芯片场景的差异化需求，为行业提供兼具性能与灵活性的解决方案。
|
|
</p>
|
|
</div>
|
|
<!-- 右侧三大核心技术可视化 -->
|
|
<div class="reveal-right">
|
|
<div class="relative">
|
|
<div class="relative w-full max-w-md mx-auto aspect-square">
|
|
<!-- 外圈装饰 -->
|
|
<div class="absolute inset-0 border-2 border-dashed border-primary/10 rounded-full animate-spin" style="animation-duration:60s;"></div>
|
|
<div class="absolute inset-4 border border-primary/20 rounded-full"></div>
|
|
<!-- 核心标签 -->
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="w-20 h-20 mx-auto mb-3 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center shadow-lg shadow-primary/20">
|
|
<i class="fa fa-microchip text-3xl text-white"></i>
|
|
</div>
|
|
<div class="text-white font-bold text-lg">DSA技术体系</div>
|
|
<div class="text-gray-400 text-xs mt-1">RISC-V Architecture</div>
|
|
</div>
|
|
</div>
|
|
<!-- 三个技术板块 -->
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4">
|
|
<div class="tech-card bg-[#0f172a] border border-gray-700 rounded-xl p-4 text-center w-44 hover-card">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-blue-500/10 rounded-lg flex items-center justify-center">
|
|
<i class="fa fa-cogs text-blue-400"></i>
|
|
</div>
|
|
<div class="text-white text-sm font-semibold">RISC-V处理器核</div>
|
|
<div class="text-gray-400 text-xs mt-1">自主研发设计</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 left-0 -translate-x-4">
|
|
<div class="tech-card bg-[#0f172a] border border-gray-700 rounded-xl p-4 text-center w-44 hover-card">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-green-500/10 rounded-lg flex items-center justify-center">
|
|
<i class="fa fa-desktop text-green-400"></i>
|
|
</div>
|
|
<div class="text-white text-sm font-semibold">DSA敏捷开发平台</div>
|
|
<div class="text-gray-400 text-xs mt-1">高效敏捷开发</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 right-0 translate-x-4">
|
|
<div class="tech-card bg-[#0f172a] border border-gray-700 rounded-xl p-4 text-center w-44 hover-card">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-purple-500/10 rounded-lg flex items-center justify-center">
|
|
<i class="fa fa-cube text-purple-400"></i>
|
|
</div>
|
|
<div class="text-white text-sm font-semibold">NPU模块</div>
|
|
<div class="text-gray-400 text-xs mt-1">灵活定制适配</div>
|
|
</div>
|
|
</div>
|
|
<!-- 连接线 -->
|
|
<svg class="absolute inset-0 w-full h-full" style="z-index:-1;">
|
|
<line x1="50%" y1="35%" x2="50%" y2="15%" stroke="rgba(22,93,255,0.15)" stroke-width="1" stroke-dasharray="4 4"/>
|
|
<line x1="35%" y1="60%" x2="18%" y2="72%" stroke="rgba(22,93,255,0.15)" stroke-width="1" stroke-dasharray="4 4"/>
|
|
<line x1="65%" y1="60%" x2="82%" y2="72%" stroke="rgba(22,93,255,0.15)" stroke-width="1" stroke-dasharray="4 4"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 应用领域 -->
|
|
<div class="reveal mb-16">
|
|
<div class="text-center mb-10">
|
|
<h3 class="text-2xl font-bold text-white mb-3">应用领域</h3>
|
|
<p class="text-gray-400 text-sm">面向DSA的RISC-V专用处理器解决方案</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-4">
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-blue-500/10 rounded-xl flex items-center justify-center group-hover:bg-blue-500/20 transition-colors">
|
|
<i class="fa fa-signal text-blue-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">5G通信</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-purple-500/10 rounded-xl flex items-center justify-center group-hover:bg-purple-500/20 transition-colors">
|
|
<i class="fa fa-lightbulb-o text-purple-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">人工智能</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-cyan-500/10 rounded-xl flex items-center justify-center group-hover:bg-cyan-500/20 transition-colors">
|
|
<i class="fa fa-microchip text-cyan-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">AI</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-green-500/10 rounded-xl flex items-center justify-center group-hover:bg-green-500/20 transition-colors">
|
|
<i class="fa fa-wifi text-green-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">物联网</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-orange-500/10 rounded-xl flex items-center justify-center group-hover:bg-orange-500/20 transition-colors">
|
|
<i class="fa fa-industry text-orange-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">工业控制</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-red-500/10 rounded-xl flex items-center justify-center group-hover:bg-red-500/20 transition-colors">
|
|
<i class="fa fa-car text-red-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">汽车电子</div>
|
|
</div>
|
|
<div class="hover-card bg-[#0f172a] border border-gray-700/50 rounded-xl p-5 text-center group">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-yellow-500/10 rounded-xl flex items-center justify-center group-hover:bg-yellow-500/20 transition-colors">
|
|
<i class="fa fa-mobile text-yellow-400 text-xl"></i>
|
|
</div>
|
|
<div class="text-gray-300 text-sm font-medium">消费电子</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数字统计 -->
|
|
<div class="reveal">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="bg-gradient-to-br from-primary/5 to-transparent border border-primary/10 rounded-2xl p-6 text-center hover-card">
|
|
<div class="text-4xl font-extrabold text-primary mb-2 stat-number" data-target="30">0</div>
|
|
<div class="text-xs text-primary/60 font-medium mb-1">+</div>
|
|
<div class="text-gray-400 text-sm">核心技术专利</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-accent/5 to-transparent border border-accent/10 rounded-2xl p-6 text-center hover-card">
|
|
<div class="text-4xl font-extrabold text-accent mb-2 stat-number" data-target="50">0</div>
|
|
<div class="text-xs text-accent/60 font-medium mb-1">+</div>
|
|
<div class="text-gray-400 text-sm">全球客户</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-green-500/5 to-transparent border border-green-500/10 rounded-2xl p-6 text-center hover-card">
|
|
<div class="text-4xl font-extrabold text-green-400 mb-2 stat-number" data-target="100">0</div>
|
|
<div class="text-xs text-green-400/60 font-medium mb-1">+</div>
|
|
<div class="text-gray-400 text-sm">专业技术人员</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-purple-500/5 to-transparent border border-purple-500/10 rounded-2xl p-6 text-center hover-card">
|
|
<div class="text-4xl font-extrabold text-purple-400 mb-2 stat-number" data-target="8">0</div>
|
|
<div class="text-xs text-purple-400/60 font-medium mb-1">+</div>
|
|
<div class="text-gray-400 text-sm">行业解决方案</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 愿景与使命 ========== -->
|
|
<div id="vision" class="tab-content hidden">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-16 reveal">
|
|
<div class="inline-block px-3 py-1 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
|
VISION & MISSION
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">愿景与使命</h2>
|
|
<p class="text-gray-400 max-w-lg mx-auto">以技术创新驱动行业变革，构筑中国处理器技术的高边疆</p>
|
|
</div>
|
|
|
|
<!-- 愿景 & 使命 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal-left">
|
|
<div class="hover-card bg-gradient-to-br from-[#0f172a] to-[#1e293b] p-8 rounded-2xl border border-gray-700/50 relative overflow-hidden h-full">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="absolute bottom-0 left-0 w-24 h-24 bg-accent/5 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center mr-4 shadow-lg shadow-primary/20">
|
|
<i class="fa fa-eye text-white text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-primary font-medium mb-1">VISION</div>
|
|
<h3 class="text-2xl font-bold text-white">我们的愿景</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary/5 border border-primary/10 rounded-xl p-6 mb-4">
|
|
<p class="text-xl font-semibold text-white leading-relaxed">以计算重构未来</p>
|
|
</div>
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
我们坚信计算的力量可以重塑世界，通过持续创新DSA处理器技术，推动计算架构的变革与演进，为数字化未来奠定坚实的技术基础。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal-right">
|
|
<div class="hover-card bg-gradient-to-br from-[#0f172a] to-[#1e293b] p-8 rounded-2xl border border-gray-700/50 relative overflow-hidden h-full">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-secondary/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="absolute bottom-0 left-0 w-24 h-24 bg-primary/5 rounded-full translate-y-1/2 -translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-accent to-primary rounded-xl flex items-center justify-center mr-4 shadow-lg shadow-accent/20">
|
|
<i class="fa fa-bullseye text-white text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-accent font-medium mb-1">MISSION</div>
|
|
<h3 class="text-2xl font-bold text-white">我们的使命</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-accent/5 border border-accent/10 rounded-xl p-6 mb-4">
|
|
<p class="text-lg font-semibold text-white leading-relaxed">
|
|
变革专用处理器的设计方法学，<br/>构筑中国处理器技术的高边疆
|
|
</p>
|
|
</div>
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
通过DSA架构创新与RISC-V技术体系的深度融合，打破传统处理器设计的壁垒，为中国半导体产业自主可控贡献核心力量。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 定位 & 主营业务 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal hover-card bg-[#0f172a] p-8 rounded-2xl border border-gray-700/50">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fa fa-crosshairs text-blue-400"></i>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-white">公司定位</h4>
|
|
</div>
|
|
<p class="text-gray-300 leading-relaxed">
|
|
提供<span class="text-white font-semibold">专用处理器IP</span>和<span class="text-white font-semibold">EDA处理器设计平台</span>的创新型高科技公司
|
|
</p>
|
|
</div>
|
|
<div class="reveal hover-card bg-[#0f172a] p-8 rounded-2xl border border-gray-700/50" style="transition-delay:0.15s;">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center mr-3">
|
|
<i class="fa fa-rocket text-green-400"></i>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-white">主营业务</h4>
|
|
</div>
|
|
<p class="text-gray-300 leading-relaxed">
|
|
面向DSA的<span class="text-white font-semibold">RISC-V专用处理器解决方案</span>，覆盖处理器核、开发平台及AI加速模块
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 核心价值观 -->
|
|
<div class="reveal">
|
|
<div class="text-center mb-10">
|
|
<h3 class="text-2xl font-bold text-white mb-3">核心价值观</h3>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="hover-card group text-center bg-[#0f172a] border border-gray-700/50 rounded-2xl p-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-blue-500/5 group-hover:from-blue-500/5 group-hover:to-blue-500/10 transition-all duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-search text-blue-400 text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-white mb-2">求实</h4>
|
|
<p class="text-gray-400 text-sm">脚踏实地，实事求是</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group text-center bg-[#0f172a] border border-gray-700/50 rounded-2xl p-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/0 to-purple-500/5 group-hover:from-purple-500/5 group-hover:to-purple-500/10 transition-all duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-road text-purple-400 text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-white mb-2">致远</h4>
|
|
<p class="text-gray-400 text-sm">志存高远，追求卓越</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group text-center bg-[#0f172a] border border-gray-700/50 rounded-2xl p-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-orange-500/0 to-orange-500/5 group-hover:from-orange-500/5 group-hover:to-orange-500/10 transition-all duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-orange-500/10 to-orange-600/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-fire text-orange-400 text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-white mb-2">热忱</h4>
|
|
<p class="text-gray-400 text-sm">满怀热情，全力以赴</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group text-center bg-[#0f172a] border border-gray-700/50 rounded-2xl p-6 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-cyan-500/0 to-cyan-500/5 group-hover:from-cyan-500/5 group-hover:to-cyan-500/10 transition-all duration-500"></div>
|
|
<div class="relative z-10">
|
|
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-cyan-500/10 to-cyan-600/10 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-diamond text-cyan-400 text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-white mb-2">敬畏</h4>
|
|
<p class="text-gray-400 text-sm">敬畏技术，敬畏市场</p>
|
|
</div>
|
|
</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 reveal">
|
|
<div class="inline-block px-3 py-1 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
|
INTELLECTUAL PROPERTY
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">知识产权体系</h2>
|
|
<p class="text-gray-400">坚持自主创新，构建完善的知识产权保护体系与资质认证</p>
|
|
</div>
|
|
|
|
<!-- 软著著作 -->
|
|
<div class="mb-12 reveal">
|
|
<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">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/WingIDE创建项目平台1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>WingIDE创建项目平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/Maotu软件前端平台1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>Maotu软件前端平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/MaotuArc-Studio后端系统1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>MaotuArc-Studio后端系统</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/CBT工具软件1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>CBT工具软件</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/Wing-M130处理器IP核软件-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>Wing-M130处理器IP核软件</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/WingIDE插件快速配置系统V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>WingIDE插件快速配置系统V1_0</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/STUDIO后端软件接口调试软件V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>STUDIO后端软件接口调试软件</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/RISCV时序精准仿真模型平台-上海隼瞻科技有限公司-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>RISCV时序精准仿真模型平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/RISC-V时序仿真优化平台V1_0软著证书-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>RISC-V时序仿真优化平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/RISCV仿真器指令转换与集成系统-隼瞻科技（深圳）有限公司-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>RISCV仿真器指令转换与集成系统</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/MaotuArc-Studio前端平台-隼瞻科技（珠海）有限公司-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>MaotuArc Studio前端平台</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 资质认证 -->
|
|
<div class="mb-12 reveal">
|
|
<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.tech/wp-content/uploads/2026/01/南京隼瞻QMS-中文正式ISO9001-1.jpg" alt="资质认证" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>南京隼瞻QMS(中)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/南京隼瞻QMS-英文正式ISO9001-1.jpg" alt="资质认证" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>南京隼瞻QMS(英)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/SGS认证ISO-26262车规-1.jpg" alt="资质认证" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>SGS ISO-26262车规</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司中文-1.jpg" alt="资质认证" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>QMS广州(中)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司英文-1.jpg" alt="资质认证" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>QMS广州(英)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 发展历程 ========== -->
|
|
<div id="history" class="tab-content hidden">
|
|
<div>
|
|
<!-- Header 居中 -->
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-16 reveal">
|
|
<div class="inline-block px-3 py-1 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
|
MILESTONES
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">隼瞻科技里程碑</h2>
|
|
<p class="text-gray-400">Wing Semi Technology Milestones</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 横向时间线 -->
|
|
<!-- 横向滚动防隐藏的 Wrapper -->
|
|
<style>
|
|
.horiz-timeline-wrapper {
|
|
cursor: grab;
|
|
}
|
|
.horiz-timeline-wrapper:active {
|
|
cursor: grabbing;
|
|
}
|
|
.horiz-timeline-wrapper::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
.horiz-timeline-wrapper::-webkit-scrollbar-track {
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
.horiz-timeline-wrapper::-webkit-scrollbar-thumb {
|
|
background: rgba(51, 65, 85, 0.8);
|
|
border-radius: 4px;
|
|
}
|
|
.horiz-timeline-wrapper::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(71, 85, 105, 1);
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* 全宽度突破容器限制 */
|
|
.full-width-breakout {
|
|
width: 100vw;
|
|
position: relative;
|
|
left: 50%;
|
|
right: 50%;
|
|
margin-left: -50vw;
|
|
margin-right: -50vw;
|
|
/* 减少左右空白，使其能够在宽屏上展示更多的卡片 */
|
|
padding-left: max(20px, 4vw);
|
|
padding-right: max(20px, 4vw);
|
|
}
|
|
</style>
|
|
<div class="relative overflow-x-auto pb-10 pt-4 horiz-timeline-wrapper full-width-breakout" id="timeline-container">
|
|
<div class="h-[430px] w-max relative flex items-center px-8 md:px-16" id="draggable-timeline">
|
|
<!-- 水平背景线 -->
|
|
<div class="absolute top-[215px] left-8 right-8 h-[2px] bg-gray-700/50 rounded-full z-0 -translate-y-1/2"></div>
|
|
<!-- 水平进度线 -->
|
|
<div class="absolute top-[215px] left-8 w-0 h-[2px] bg-gradient-to-r from-primary to-accent z-0 -translate-y-1/2 transition-all duration-[2.5s] ease-out shadow-[0_0_10px_rgba(22,93,255,0.5)]" id="timeline-progress" style="width: 100%;"></div>
|
|
|
|
<div class="flex gap-4 md:gap-8 relative z-10 items-center">
|
|
|
|
<!-- === 2023 === -->
|
|
<div class="w-20 md:w-28 flex justify-center shrink-0">
|
|
<span class="bg-gradient-to-r from-primary to-secondary text-white px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-[0_0_20px_rgba(22,93,255,0.4)]">2023</span>
|
|
</div>
|
|
|
|
<!-- 2023 - 2月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">隼瞻科技正式成立</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">2月</div>
|
|
</div>
|
|
|
|
<!-- 2023 - 7月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">7月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">Wing-M050极低功耗、极小面积RISC-V处理器发布</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === 2024 === -->
|
|
<div class="w-20 md:w-28 flex justify-center shrink-0 ml-6 md:ml-12">
|
|
<span class="bg-gradient-to-r from-primary to-secondary text-white px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-[0_0_20px_rgba(22,93,255,0.4)]">2024</span>
|
|
</div>
|
|
|
|
<!-- 2024 - 8月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">Wing-M130通用高性能嵌入式RISC-V微控制器发布</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">8月</div>
|
|
</div>
|
|
|
|
<!-- 2024 - 10月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">10月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">Wing-M050S、Wing-M130S面向嵌入式领域信息安全处理器发布</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2024 - 11月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">获ISO 26262:2018功能安全ASIL D产品认证证书</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">11月</div>
|
|
</div>
|
|
|
|
<!-- 2024 - 12月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">12月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">主办"RISC-V智能汽车生态研讨大会"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === 2025 === -->
|
|
<div class="w-20 md:w-28 flex justify-center shrink-0 ml-6 md:ml-12">
|
|
<span class="bg-gradient-to-r from-primary to-secondary text-white px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-[0_0_20px_rgba(22,93,255,0.4)]">2025</span>
|
|
</div>
|
|
|
|
<!-- 2025 - 1月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">Wing-M510面向高可靠性高性能应用的RISC-V发布</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">1月</div>
|
|
</div>
|
|
|
|
<!-- 2025 - 7月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">7月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">DSA处理器敏捷开发平台ArchitStudio发布</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2025 - 7月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">端侧AI CPU+NPU融合解决方案"智翼"发布</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">7月</div>
|
|
</div>
|
|
|
|
<!-- 2025 - 11月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">11月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">Wing-A500多核RISC-V应用处理器发布</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2025 - 12月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">主办"RISC-V x AI生态大会暨ArchitStudio用户大会"</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">12月</div>
|
|
</div>
|
|
|
|
<!-- 2025 - 12月 (Bottom) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-end items-center group relative shrink-0">
|
|
<div class="font-bold text-primary mb-8 group-hover:translate-y-1 group-hover:text-accent transition-all duration-300 absolute bottom-[55%] text-base md:text-lg">12月</div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300"></div>
|
|
<div class="w-px h-8 bg-gray-600/50 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mt-6 relative z-10 border-gray-700 transition-all duration-300 group-hover:translate-y-2 group-hover:border-primary/50 group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.15)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-medium leading-relaxed">通过国家高新技术企业认定</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- === 2026 === -->
|
|
<div class="w-20 md:w-28 flex justify-center shrink-0 ml-6 md:ml-12">
|
|
<span class="bg-gradient-to-r from-primary to-accent text-white px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-[0_0_20px_rgba(22,93,255,0.4)] animate-pulse border border-white/20">2026</span>
|
|
</div>
|
|
|
|
<!-- 2026 - 1月 (Top) -->
|
|
<div class="w-56 md:w-64 h-[350px] flex flex-col justify-start items-center group relative shrink-0">
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 !before:hidden text-center mb-6 relative z-10 border-primary/40 transition-all duration-300 group-hover:-translate-y-2 group-hover:border-primary group-hover:shadow-[0_10px_30px_rgba(22,93,255,0.25)] bg-[#1e293b]/90 backdrop-blur-sm">
|
|
<p class="text-gray-200 text-sm md:text-base font-semibold leading-relaxed">通过专精特新中小企业认定</p>
|
|
</div>
|
|
<div class="w-px h-8 bg-primary/40 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-darkerBg border-[3px] border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary group-hover:shadow-[0_0_20px_rgba(22,93,255,0.8)] group-hover:scale-125 transition-all duration-300 shadow-[0_0_10px_rgba(22,93,255,0.5)]"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 group-hover:text-accent transition-all duration-300 absolute top-[55%] text-base md:text-lg">1月</div>
|
|
</div>
|
|
|
|
<div class="w-16 shrink-0"></div> <!-- 右侧占位 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 添加拖拽水平滚动功能与边界自动滚动
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const slider = document.getElementById('timeline-container');
|
|
let isDown = false;
|
|
let startX;
|
|
let scrollLeft;
|
|
|
|
// 自动滚动变量
|
|
let autoScrollSpeed = 0;
|
|
let isHovering = false;
|
|
const edgeThreshold = 150; // 检测边缘的距离(px)
|
|
const maxSpeed = 12; // 最大滚动速度
|
|
|
|
// 鼠标拖拽
|
|
slider.addEventListener('mousedown', (e) => {
|
|
isDown = true;
|
|
slider.classList.add('active');
|
|
startX = e.pageX - slider.offsetLeft;
|
|
scrollLeft = slider.scrollLeft;
|
|
autoScrollSpeed = 0; // 拖拽时屏蔽自动滚动
|
|
});
|
|
slider.addEventListener('mouseleave', () => {
|
|
isDown = false;
|
|
isHovering = false;
|
|
autoScrollSpeed = 0;
|
|
slider.classList.remove('active');
|
|
});
|
|
slider.addEventListener('mouseup', () => {
|
|
isDown = false;
|
|
slider.classList.remove('active');
|
|
});
|
|
|
|
slider.addEventListener('mouseenter', () => {
|
|
isHovering = true;
|
|
});
|
|
|
|
slider.addEventListener('mousemove', (e) => {
|
|
// 拖拽逻辑
|
|
if (isDown) {
|
|
e.preventDefault();
|
|
const x = e.pageX - slider.offsetLeft;
|
|
const walk = (x - startX) * 2; // scroll-fast
|
|
slider.scrollLeft = scrollLeft - walk;
|
|
return;
|
|
}
|
|
|
|
// 边界自动滚动逻辑
|
|
const rect = slider.getBoundingClientRect();
|
|
const mouseX = e.clientX - rect.left;
|
|
const width = rect.width;
|
|
|
|
if (mouseX < edgeThreshold) {
|
|
// 靠近左边缘
|
|
const ratio = 1 - (mouseX / edgeThreshold);
|
|
autoScrollSpeed = -maxSpeed * ratio;
|
|
} else if (mouseX > width - edgeThreshold) {
|
|
// 靠近右边缘
|
|
const ratio = 1 - ((width - mouseX) / edgeThreshold);
|
|
autoScrollSpeed = maxSpeed * ratio;
|
|
} else {
|
|
autoScrollSpeed = 0;
|
|
}
|
|
});
|
|
|
|
// 自动滚动动画循环
|
|
function updateAutoScroll() {
|
|
if (isHovering && !isDown && autoScrollSpeed !== 0) {
|
|
slider.scrollLeft += autoScrollSpeed;
|
|
}
|
|
requestAnimationFrame(updateAutoScroll);
|
|
}
|
|
|
|
// 启动动画循环
|
|
requestAnimationFrame(updateAutoScroll);
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 企业文化 ========== -->
|
|
<div id="culture" class="tab-content hidden">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-16 reveal">
|
|
<div class="inline-block px-3 py-1 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
|
|
CORPORATE CULTURE
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">企业文化</h2>
|
|
<p class="text-gray-400 max-w-lg mx-auto">求实、致远、热忱、敬畏 -- 驱动我们不断前行的精神内核</p>
|
|
</div>
|
|
|
|
<!-- 文化核心理念 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal-left">
|
|
<div class="hover-card bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-2xl border border-gray-700/50 overflow-hidden h-full">
|
|
<div class="h-2 bg-gradient-to-r from-primary via-accent to-primary"></div>
|
|
<div class="p-8">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mr-4">
|
|
<i class="fa fa-lightbulb-o text-primary text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white">创新驱动</h3>
|
|
</div>
|
|
<p class="text-gray-300 mb-6 leading-relaxed text-sm">
|
|
我们坚信技术创新是推动行业进步的核心动力。公司鼓励每一位成员大胆探索、勇于突破，在DSA处理器设计领域不断挑战技术边界。
|
|
</p>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-primary/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-primary text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">鼓励技术探索与方法学创新</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-primary/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-primary text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">开放包容的技术交流氛围</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-primary/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-primary text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">定期举办内部技术分享与研讨</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal-right">
|
|
<div class="hover-card bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-2xl border border-gray-700/50 overflow-hidden h-full">
|
|
<div class="h-2 bg-gradient-to-r from-accent via-green-400 to-accent"></div>
|
|
<div class="p-8">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center mr-4">
|
|
<i class="fa fa-users text-accent text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white">团队协作</h3>
|
|
</div>
|
|
<p class="text-gray-300 mb-6 leading-relaxed text-sm">
|
|
在处理器设计这一高度复杂的系统工程中，我们深知团队协作的重要性。公司构建了扁平化的组织结构，促进高效的跨部门协同。
|
|
</p>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-accent/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-accent text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">扁平化管理，高效决策</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-accent/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-accent text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">跨部门协作，资源共享</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-5 h-5 bg-accent/10 rounded-md flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">
|
|
<i class="fa fa-check text-accent text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">共同目标驱动，共享成功喜悦</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 职业发展 & 工作环境 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal hover-card bg-[#0f172a] p-8 rounded-2xl border border-gray-700/50">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-xl flex items-center justify-center mb-6">
|
|
<i class="fa fa-line-chart text-purple-400 text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-4 text-white">职业发展</h3>
|
|
<p class="text-gray-400 text-sm mb-6 leading-relaxed">
|
|
完善的培训体系和清晰的晋升通道，帮助每一位成员实现个人价值与职业理想。
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-graduation-cap text-purple-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">系统性技术培训与管理培训</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-trophy text-purple-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">技术专家与管理双通道晋升</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-purple-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-globe text-purple-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">参与行业前沿项目的机会</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal hover-card bg-[#0f172a] p-8 rounded-2xl border border-gray-700/50" style="transition-delay:0.15s;">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-orange-500/10 to-orange-600/10 rounded-xl flex items-center justify-center mb-6">
|
|
<i class="fa fa-home text-orange-400 text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-4 text-white">工作环境</h3>
|
|
<p class="text-gray-400 text-sm mb-6 leading-relaxed">
|
|
舒适、开放、充满活力的办公环境，让创造力自由生长。
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-orange-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-building text-orange-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">开放式办公空间促进协作交流</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-orange-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-heartbeat text-orange-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">完善的福利与健康保障体系</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-orange-500/10 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i class="fa fa-coffee text-orange-400 text-xs"></i>
|
|
</div>
|
|
<span class="text-gray-300 text-sm">灵活工作时间与丰富团队活动</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文化活动展示 -->
|
|
<div class="reveal">
|
|
<div class="text-center mb-8">
|
|
<h3 class="text-2xl font-bold text-white mb-3">我们的生活</h3>
|
|
<p class="text-gray-400 text-sm">工作之余，丰富多彩的文化活动</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
|
<div class="hover-card group rounded-2xl overflow-hidden border border-gray-700/50 bg-[#0f172a]">
|
|
<div class="h-40 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 hex-pattern opacity-20"></div>
|
|
<i class="fa fa-code text-5xl text-blue-400/40 group-hover:text-blue-400/70 transition-colors duration-300 group-hover:scale-110 transform transition-transform"></i>
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="font-semibold text-white mb-2">技术分享会</h4>
|
|
<p class="text-gray-400 text-sm">定期举办技术分享，促进知识交流</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group rounded-2xl overflow-hidden border border-gray-700/50 bg-[#0f172a]">
|
|
<div class="h-40 bg-gradient-to-br from-green-500/20 to-cyan-500/20 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 dot-pattern opacity-20"></div>
|
|
<i class="fa fa-futbol-o text-5xl text-green-400/40 group-hover:text-green-400/70 transition-colors duration-300 group-hover:scale-110 transform transition-transform"></i>
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="font-semibold text-white mb-2">运动赛事</h4>
|
|
<p class="text-gray-400 text-sm">组织各类运动赛事，强健体魄</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group rounded-2xl overflow-hidden border border-gray-700/50 bg-[#0f172a]">
|
|
<div class="h-40 bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 circuit-pattern opacity-20"></div>
|
|
<i class="fa fa-tree text-5xl text-orange-400/40 group-hover:text-orange-400/70 transition-colors duration-300 group-hover:scale-110 transform transition-transform"></i>
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="font-semibold text-white mb-2">团建活动</h4>
|
|
<p class="text-gray-400 text-sm">丰富多彩的团队建设活动</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 hover:scale-110 focus:outline-none z-50">
|
|
<i class="fa fa-arrow-up"></i>
|
|
</button>
|
|
|
|
<!-- ==================== JavaScript ==================== -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
// ===== 粒子背景 =====
|
|
const canvas = document.getElementById('particle-canvas');
|
|
if (canvas) {
|
|
const ctx = canvas.getContext('2d');
|
|
let particles = [];
|
|
|
|
function resizeCanvas() {
|
|
canvas.width = canvas.parentElement.offsetWidth;
|
|
canvas.height = canvas.parentElement.offsetHeight;
|
|
}
|
|
resizeCanvas();
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
|
class Particle {
|
|
constructor() { this.reset(); }
|
|
reset() {
|
|
this.x = Math.random() * canvas.width;
|
|
this.y = Math.random() * canvas.height;
|
|
this.size = Math.random() * 2 + 0.5;
|
|
this.speedX = (Math.random() - 0.5) * 0.5;
|
|
this.speedY = (Math.random() - 0.5) * 0.5;
|
|
this.opacity = Math.random() * 0.5 + 0.1;
|
|
}
|
|
update() {
|
|
this.x += this.speedX;
|
|
this.y += this.speedY;
|
|
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) this.reset();
|
|
}
|
|
draw() {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
|
ctx.fillStyle = `rgba(22, 93, 255, ${this.opacity})`;
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < 80; i++) particles.push(new Particle());
|
|
|
|
function connectParticles() {
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x;
|
|
const dy = particles[i].y - particles[j].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 120) {
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = `rgba(22, 93, 255, ${0.05 * (1 - dist / 120)})`;
|
|
ctx.lineWidth = 0.5;
|
|
ctx.moveTo(particles[i].x, particles[i].y);
|
|
ctx.lineTo(particles[j].x, particles[j].y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function animateParticles() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
particles.forEach(p => { p.update(); p.draw(); });
|
|
connectParticles();
|
|
requestAnimationFrame(animateParticles);
|
|
}
|
|
animateParticles();
|
|
}
|
|
|
|
// ===== 标签页切换 =====
|
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
tabButtons.forEach(btn => {
|
|
btn.classList.remove('active', 'text-white');
|
|
btn.classList.add('text-gray-400');
|
|
});
|
|
button.classList.add('active', 'text-white');
|
|
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');
|
|
setTimeout(() => {
|
|
triggerRevealAnimations();
|
|
triggerCountUp();
|
|
}, 100);
|
|
}
|
|
});
|
|
});
|
|
|
|
// ===== 滚动揭示动画 =====
|
|
function triggerRevealAnimations() {
|
|
const reveals = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
|
|
const windowHeight = window.innerHeight;
|
|
reveals.forEach((el, i) => {
|
|
const top = el.getBoundingClientRect().top;
|
|
if (top < windowHeight - 60) {
|
|
setTimeout(() => el.classList.add('active'), i * 50);
|
|
}
|
|
});
|
|
}
|
|
window.addEventListener('scroll', triggerRevealAnimations);
|
|
window.addEventListener('load', triggerRevealAnimations);
|
|
triggerRevealAnimations();
|
|
|
|
// ===== 数字计数动画 =====
|
|
function triggerCountUp() {
|
|
const statNumbers = document.querySelectorAll('.stat-number');
|
|
statNumbers.forEach(stat => {
|
|
const top = stat.getBoundingClientRect().top;
|
|
if (top < window.innerHeight - 60 && !stat.classList.contains('counted')) {
|
|
stat.classList.add('counted');
|
|
const target = parseInt(stat.dataset.target);
|
|
let count = 0;
|
|
const duration = 2000;
|
|
const increment = target / (duration / 16);
|
|
const update = () => {
|
|
count += increment;
|
|
if (count < target) {
|
|
stat.textContent = Math.ceil(count);
|
|
requestAnimationFrame(update);
|
|
} else {
|
|
stat.textContent = target;
|
|
}
|
|
};
|
|
update();
|
|
}
|
|
});
|
|
}
|
|
window.addEventListener('scroll', triggerCountUp);
|
|
triggerCountUp();
|
|
|
|
// ===== 时间线进度动画 =====
|
|
const timelineProgress = document.getElementById('timeline-progress');
|
|
if (timelineProgress) {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) timelineProgress.classList.add('active');
|
|
});
|
|
}, { threshold: 0.1 });
|
|
observer.observe(timelineProgress.parentElement);
|
|
}
|
|
|
|
// ===== 返回顶部 =====
|
|
const backToTop = document.getElementById('back-to-top');
|
|
if (backToTop) {
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 300) {
|
|
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' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|