1304 lines
88 KiB
HTML
1304 lines
88 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: '#3b82f6',
|
|
secondary: '#60a5fa',
|
|
accent: '#93c5fd',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.glass-panel-light {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.05);
|
|
}
|
|
}
|
|
|
|
/* ========== 基础动画 ========== */
|
|
@keyframes gradientFlow {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
@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 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 dotPulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
|
|
50% { box-shadow: 0 0 0 12px rgba(59,130,246,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);
|
|
}
|
|
|
|
/* ========== 粒子 ========== */
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
.particle-1 { width: 4px; height: 4px; background: rgba(59,130,246,0.3); animation: particleFloat 12s infinite; }
|
|
.particle-2 { width: 6px; height: 6px; background: rgba(96,165,250,0.2); animation: particleFloat 15s infinite 2s; }
|
|
.particle-3 { width: 3px; height: 3px; background: rgba(59,130,246,0.4); animation: particleFloat 10s infinite 4s; }
|
|
.particle-4 { width: 5px; height: 5px; background: rgba(96,165,250,0.15); animation: particleFloat 18s infinite 1s; }
|
|
.particle-5 { width: 4px; height: 4px; background: rgba(59,130,246,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='%233b82f6' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%233b82f6' fill-opacity='0.08'/%3E%3Ccircle cx='90' cy='10' r='2' fill='%233b82f6' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='90' r='2' fill='%233b82f6' fill-opacity='0.08'/%3E%3Ccircle cx='90' cy='90' r='2' fill='%233b82f6' fill-opacity='0.08'/%3E%3Cpath d='M50 10v80M10 50h80' stroke='%233b82f6' 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='%233b82f6' stroke-opacity='0.06' stroke-width='0.5' transform='translate(0,-4)'/%3E%3C/svg%3E");
|
|
}
|
|
.dot-pattern {
|
|
background-image: radial-gradient(circle, rgba(59,130,246,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;
|
|
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: #3b82f6;
|
|
transition: all 0.3s ease;
|
|
transform: translateX(-50%);
|
|
}
|
|
.tab-btn.active::after {
|
|
width: 100%;
|
|
}
|
|
.tab-btn.active {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* ========== 卡片悬浮 ========== */
|
|
.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 40px rgba(59,130,246,0.15);
|
|
background: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
/* ========== 旋转装饰环 ========== */
|
|
.orbit-ring {
|
|
position: absolute;
|
|
border: 1px solid rgba(59,130,246,0.2);
|
|
border-radius: 50%;
|
|
animation: rotate360 30s linear infinite;
|
|
}
|
|
.orbit-ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #3b82f6;
|
|
border-radius: 50%;
|
|
top: -3px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
box-shadow: 0 0 10px rgba(59,130,246,0.5);
|
|
}
|
|
|
|
/* ========== 核心技术卡片光效 ========== */
|
|
.tech-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
box-shadow: 0 4px 20px rgba(59,130,246,0.05);
|
|
}
|
|
.tech-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(59,130,246,0.05), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
.tech-card:hover::after {
|
|
left: 100%;
|
|
}
|
|
|
|
/* ========== 时间线 ========== */
|
|
.timeline-card {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
border-radius: 12px;
|
|
padding: 20px 24px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.05);
|
|
}
|
|
.timeline-card:hover {
|
|
border-color: rgba(59,130,246,0.4);
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
/* ========== 知识产权图片网格 ========== */
|
|
.ip-grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 16px;
|
|
padding: 20px 0;
|
|
}
|
|
.ip-grid-item {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(16px);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
padding: 8px;
|
|
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
.ip-grid-item:hover {
|
|
border-color: rgba(59,130,246,0.4);
|
|
transform: translateY(-3px);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
}
|
|
.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: #475569;
|
|
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: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
</style>
|
|
</head>
|
|
<body class="font-inter bg-slate-50 text-slate-700 min-h-screen flex flex-col relative m-0 p-0">
|
|
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none">
|
|
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-200/50 blur-[100px]"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-sky-200/40 blur-[100px]"></div>
|
|
<div class="absolute top-[40%] right-[10%] w-[30%] h-[30%] rounded-full bg-indigo-100/60 blur-[80px]"></div>
|
|
<div class="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-blue-100/50 blur-[80px]"></div>
|
|
</div>
|
|
|
|
<!-- ==================== HERO SECTION ==================== -->
|
|
<section class="relative pt-24 md:pt-32 pb-20 md:pb-32 overflow-hidden">
|
|
<canvas id="particle-canvas" class="z-10"></canvas>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-white/70 via-blue-50/50 to-white/70 gradient-animate z-0"></div>
|
|
<div class="absolute inset-0 circuit-pattern-light opacity-30 z-0"></div>
|
|
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] z-0">
|
|
<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="container mx-auto px-4 md:px-6 lg:px-8 relative z-20">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<div class="inline-block mb-6 px-4 py-2 glass-panel rounded-full text-primary text-sm font-medium border border-white" style="animation: fadeInUp 0.6s ease both;">
|
|
<i class="fa fa-building-o mr-2"></i>WingSemi Technology
|
|
</div>
|
|
<h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-extrabold text-slate-800 leading-tight mb-6 drop-shadow-sm" style="animation: fadeInUp 0.8s ease both 0.1s;">
|
|
关于<span class="text-primary mx-2">隼瞻科技</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed font-medium" 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-slate-500 font-medium">
|
|
<div class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse shadow-sm shadow-green-200"></div>
|
|
<span class="text-sm">DSA专用指令集架构</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-500 font-medium">
|
|
<div class="w-2.5 h-2.5 bg-blue-400 rounded-full animate-pulse shadow-sm shadow-blue-200" style="animation-delay:0.5s;"></div>
|
|
<span class="text-sm">RISC-V技术体系</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-slate-500 font-medium">
|
|
<div class="w-2.5 h-2.5 bg-purple-400 rounded-full animate-pulse shadow-sm shadow-purple-200" style="animation-delay:1s;"></div>
|
|
<span class="text-sm">模块化解决方案</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== TAB 导航 ==================== -->
|
|
<section class="py-4 glass-panel sticky top-0 md:top-16 z-40 border-b border-white rounded-none shadow-[0_4px_20px_rgba(59,130,246,0.05)] backdrop-blur-xl">
|
|
<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-bold text-primary rounded-lg hover:bg-white/50 transition-all focus:outline-none" 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-semibold text-slate-500 rounded-lg hover:bg-white/50 transition-all focus:outline-none" 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-semibold text-slate-500 rounded-lg hover:bg-white/50 transition-all focus:outline-none" 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-semibold text-slate-500 rounded-lg hover:bg-white/50 transition-all focus:outline-none" 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-semibold text-slate-500 rounded-lg hover:bg-white/50 transition-all focus:outline-none" 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 relative z-10 w-full">
|
|
<div class="absolute inset-0 dot-pattern opacity-40 z-0 pointer-events-none"></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 glass-panel border border-white rounded-full text-primary text-xs font-bold mb-4 shadow-sm">
|
|
ABOUT WINGSEMI
|
|
</div>
|
|
<h2 class="text-3xl md:text-5xl font-extrabold mb-8 text-slate-800 leading-tight drop-shadow-sm">
|
|
聚焦DSA处理器<br/>
|
|
<span class="text-primary mt-2 inline-block">设计创新</span>
|
|
</h2>
|
|
<div class="glass-panel p-6 rounded-2xl border border-white mb-6 shadow-sm">
|
|
<p class="text-slate-600 leading-relaxed text-[15px] font-medium text-justify">
|
|
隼瞻科技是一家聚焦DSA处理器设计创新的高科技企业，致力于打造基于 DSA（专用指令集架构）的RISC-V技术体系。公司依托三大核心技术板块 -- 自主研发的RISC-V处理器核、高效敏捷的DSA处理器敏捷开发平台，以及可灵活定制适配多元模型的NPU模块，构建起高度模块化的解决方案体系。
|
|
</p>
|
|
</div>
|
|
<p class="text-slate-600 mb-8 leading-relaxed text-[15px] pl-2 border-l-4 border-primary">
|
|
通过自由组合的产品架构，精准响应AIOT、DSP、5G网络、汽车电子、人工智能等复杂芯片场景的差异化需求，为行业提供兼具性能与灵活性的解决方案。
|
|
</p>
|
|
</div>
|
|
|
|
<div class="reveal-right">
|
|
<div class="relative w-full max-w-md mx-auto aspect-square">
|
|
<div class="absolute inset-0 border-2 border-dashed border-primary/30 rounded-full animate-spin" style="animation-duration:60s;"></div>
|
|
<div class="absolute inset-4 border border-primary/40 rounded-full bg-white/20 backdrop-blur-sm"></div>
|
|
|
|
<div class="absolute inset-0 flex items-center justify-center z-10">
|
|
<div class="text-center glass-panel w-40 h-40 rounded-full flex flex-col items-center justify-center border-2 border-white shadow-lg">
|
|
<div class="w-14 h-14 mb-2 bg-gradient-to-br from-primary to-accent rounded-2xl flex items-center justify-center shadow-md text-white">
|
|
<i class="fa fa-microchip text-2xl"></i>
|
|
</div>
|
|
<div class="text-slate-800 font-bold text-sm">DSA技术体系</div>
|
|
<div class="text-slate-500 text-[10px] mt-1 font-medium">RISC-V Architecture</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4 z-20">
|
|
<div class="tech-card rounded-2xl p-4 text-center w-40 hover-card border-2 border-white">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-blue-100 rounded-lg flex items-center justify-center text-primary shadow-inner border border-blue-200">
|
|
<i class="fa fa-cogs"></i>
|
|
</div>
|
|
<div class="text-slate-800 text-xs font-bold mb-1">RISC-V处理器核</div>
|
|
<div class="text-slate-500 text-[10px] font-medium">自主研发设计</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 left-0 -translate-x-4 z-20">
|
|
<div class="tech-card rounded-2xl p-4 text-center w-40 hover-card border-2 border-white">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-green-100 rounded-lg flex items-center justify-center text-green-600 shadow-inner border border-green-200">
|
|
<i class="fa fa-desktop"></i>
|
|
</div>
|
|
<div class="text-slate-800 text-xs font-bold mb-1">DSA敏捷开发平台</div>
|
|
<div class="text-slate-500 text-[10px] font-medium">高效敏捷开发</div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute bottom-4 right-0 translate-x-4 z-20">
|
|
<div class="tech-card rounded-2xl p-4 text-center w-40 hover-card border-2 border-white">
|
|
<div class="w-10 h-10 mx-auto mb-2 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 shadow-inner border border-purple-200">
|
|
<i class="fa fa-cube"></i>
|
|
</div>
|
|
<div class="text-slate-800 text-xs font-bold mb-1">NPU模块</div>
|
|
<div class="text-slate-500 text-[10px] font-medium">灵活定制适配</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 应用领域 -->
|
|
<div class="reveal mb-20 bg-white/40 backdrop-blur-xl border border-white rounded-3xl p-8 md:p-12 shadow-sm relative overflow-hidden">
|
|
<div class="text-center mb-10 relative z-10">
|
|
<h3 class="text-2xl md:text-3xl font-extrabold text-slate-800 mb-3">应用领域</h3>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-4 opacity-70"></div>
|
|
<p class="text-slate-600 font-medium">面向DSA的RISC-V专用处理器解决方案</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-5 relative z-10">
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-blue-50 rounded-xl flex items-center justify-center text-primary group-hover:scale-110 transition-transform shadow-inner border border-blue-100">
|
|
<i class="fa fa-signal text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">5G通信</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-purple-50 rounded-xl flex items-center justify-center text-purple-600 group-hover:scale-110 transition-transform shadow-inner border border-purple-100">
|
|
<i class="fa fa-lightbulb-o text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">人工智能</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-cyan-50 rounded-xl flex items-center justify-center text-cyan-600 group-hover:scale-110 transition-transform shadow-inner border border-cyan-100">
|
|
<i class="fa fa-microchip text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">AI</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-green-50 rounded-xl flex items-center justify-center text-green-600 group-hover:scale-110 transition-transform shadow-inner border border-green-100">
|
|
<i class="fa fa-wifi text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">物联网</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-orange-50 rounded-xl flex items-center justify-center text-orange-600 group-hover:scale-110 transition-transform shadow-inner border border-orange-100">
|
|
<i class="fa fa-industry text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">工业控制</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-red-50 rounded-xl flex items-center justify-center text-red-500 group-hover:scale-110 transition-transform shadow-inner border border-red-100">
|
|
<i class="fa fa-car text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">汽车电子</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-2xl p-5 text-center group hover-card">
|
|
<div class="w-12 h-12 mx-auto mb-3 bg-yellow-50 rounded-xl flex items-center justify-center text-yellow-600 group-hover:scale-110 transition-transform shadow-inner border border-yellow-100">
|
|
<i class="fa fa-mobile text-xl"></i>
|
|
</div>
|
|
<div class="text-slate-700 text-sm font-bold">消费电子</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数字统计 -->
|
|
<div class="reveal">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="glass-panel border border-white rounded-3xl p-8 text-center hover-card shadow-sm bg-white/50">
|
|
<div class="text-4xl lg:text-5xl font-black text-primary mb-2 stat-number drop-shadow-sm" data-target="30">0</div>
|
|
<div class="text-primary font-bold text-lg mb-2">+</div>
|
|
<div class="text-slate-600 font-bold text-sm">核心技术专利</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-3xl p-8 text-center hover-card shadow-sm bg-white/50">
|
|
<div class="text-4xl lg:text-5xl font-black text-accent mb-2 stat-number drop-shadow-sm" data-target="50">0</div>
|
|
<div class="text-accent font-bold text-lg mb-2">+</div>
|
|
<div class="text-slate-600 font-bold text-sm">全球客户</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-3xl p-8 text-center hover-card shadow-sm bg-white/50">
|
|
<div class="text-4xl lg:text-5xl font-black text-green-500 mb-2 stat-number drop-shadow-sm" data-target="100">0</div>
|
|
<div class="text-green-500 font-bold text-lg mb-2">+</div>
|
|
<div class="text-slate-600 font-bold text-sm">专业技术人员</div>
|
|
</div>
|
|
<div class="glass-panel border border-white rounded-3xl p-8 text-center hover-card shadow-sm bg-white/50">
|
|
<div class="text-4xl lg:text-5xl font-black text-purple-500 mb-2 stat-number drop-shadow-sm" data-target="8">0</div>
|
|
<div class="text-purple-500 font-bold text-lg mb-2">+</div>
|
|
<div class="text-slate-600 font-bold 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 glass-panel border border-white rounded-full text-primary text-xs font-bold mb-4 shadow-sm">
|
|
VISION & MISSION
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800 drop-shadow-sm">愿景与使命</h2>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-6 opacity-70"></div>
|
|
<p class="text-slate-600 max-w-lg mx-auto font-medium text-lg">以技术创新驱动行业变革，构筑中国处理器技术的高边疆</p>
|
|
</div>
|
|
|
|
<!-- 愿景 & 使命 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal-left">
|
|
<div class="hover-card glass-panel-light p-8 md:p-10 rounded-3xl border border-white relative overflow-hidden h-full shadow-lg">
|
|
<div class="absolute top-0 right-0 w-40 h-40 bg-blue-100/50 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center mb-8">
|
|
<div class="w-16 h-16 bg-white border border-blue-100 rounded-2xl flex items-center justify-center mr-5 shadow-sm text-primary">
|
|
<i class="fa fa-eye text-3xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-primary font-bold mb-1 tracking-wider uppercase">Vision</div>
|
|
<h3 class="text-2xl font-bold text-slate-800">我们的愿景</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-blue-50/80 border border-blue-100 rounded-2xl p-6 mb-6 shadow-inner">
|
|
<p class="text-xl font-bold text-primary leading-relaxed text-center">以计算重构未来</p>
|
|
</div>
|
|
<p class="text-slate-600 text-[15px] leading-relaxed font-medium text-justify">
|
|
我们坚信计算的力量可以重塑世界，通过持续创新DSA处理器技术，推动计算架构的变革与演进，为数字化未来奠定坚实的技术基础。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal-right">
|
|
<div class="hover-card glass-panel-light p-8 md:p-10 rounded-3xl border border-white relative overflow-hidden h-full shadow-lg">
|
|
<div class="absolute bottom-0 left-0 w-40 h-40 bg-purple-100/50 rounded-full translate-y-1/2 -translate-x-1/2 blur-2xl"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center mb-8">
|
|
<div class="w-16 h-16 bg-white border border-purple-100 rounded-2xl flex items-center justify-center mr-5 shadow-sm text-purple-600">
|
|
<i class="fa fa-bullseye text-3xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-purple-600 font-bold mb-1 tracking-wider uppercase">Mission</div>
|
|
<h3 class="text-2xl font-bold text-slate-800">我们的使命</h3>
|
|
</div>
|
|
</div>
|
|
<div class="bg-purple-50/80 border border-purple-100 rounded-2xl p-6 mb-6 shadow-inner">
|
|
<p class="text-lg font-bold text-purple-600 leading-relaxed text-center">
|
|
变革专用处理器的设计方法学，<br/>构筑中国处理器技术的高边疆
|
|
</p>
|
|
</div>
|
|
<p class="text-slate-600 text-[15px] leading-relaxed font-medium text-justify">
|
|
通过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 glass-panel p-8 rounded-3xl border border-white shadow-sm flex items-start gap-5">
|
|
<div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shrink-0 shadow-sm border border-slate-100 text-blue-500">
|
|
<i class="fa fa-crosshairs text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">公司定位</h4>
|
|
<p class="text-slate-600 leading-relaxed font-medium text-sm">
|
|
提供<span class="text-primary font-bold">专用处理器IP</span>和<span class="text-primary font-bold">EDA处理器设计平台</span>的创新型高科技公司
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="reveal hover-card glass-panel p-8 rounded-3xl border border-white shadow-sm flex items-start gap-5" style="transition-delay:0.15s;">
|
|
<div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shrink-0 shadow-sm border border-slate-100 text-green-500">
|
|
<i class="fa fa-rocket text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">主营业务</h4>
|
|
<p class="text-slate-600 leading-relaxed font-medium text-sm">
|
|
面向DSA的<span class="text-green-600 font-bold">RISC-V专用处理器解决方案</span>，覆盖处理器核、开发平台及AI加速模块
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 核心价值观 -->
|
|
<div class="reveal">
|
|
<div class="text-center mb-10">
|
|
<h3 class="text-2xl md:text-3xl font-extrabold text-slate-800 mb-4">核心价值观</h3>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div class="hover-card text-center glass-panel border border-white rounded-3xl p-8">
|
|
<div class="w-16 h-16 mx-auto mb-5 bg-white border border-blue-100 rounded-full flex items-center justify-center shadow-sm text-blue-500">
|
|
<i class="fa fa-search text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">求实</h4>
|
|
<p class="text-slate-500 text-sm font-medium">脚踏实地，实事求是</p>
|
|
</div>
|
|
<div class="hover-card text-center glass-panel border border-white rounded-3xl p-8">
|
|
<div class="w-16 h-16 mx-auto mb-5 bg-white border border-purple-100 rounded-full flex items-center justify-center shadow-sm text-purple-500">
|
|
<i class="fa fa-road text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">致远</h4>
|
|
<p class="text-slate-500 text-sm font-medium">志存高远，追求卓越</p>
|
|
</div>
|
|
<div class="hover-card text-center glass-panel border border-white rounded-3xl p-8">
|
|
<div class="w-16 h-16 mx-auto mb-5 bg-white border border-orange-100 rounded-full flex items-center justify-center shadow-sm text-orange-500">
|
|
<i class="fa fa-fire text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">热忱</h4>
|
|
<p class="text-slate-500 text-sm font-medium">满怀热情，全力以赴</p>
|
|
</div>
|
|
<div class="hover-card text-center glass-panel border border-white rounded-3xl p-8">
|
|
<div class="w-16 h-16 mx-auto mb-5 bg-white border border-cyan-100 rounded-full flex items-center justify-center shadow-sm text-cyan-500">
|
|
<i class="fa fa-diamond text-2xl"></i>
|
|
</div>
|
|
<h4 class="text-xl font-bold text-slate-800 mb-2">敬畏</h4>
|
|
<p class="text-slate-500 text-sm font-medium">敬畏技术，敬畏市场</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-16 reveal">
|
|
<div class="inline-block px-3 py-1 glass-panel border border-white rounded-full text-primary text-xs font-bold mb-4 shadow-sm">
|
|
INTELLECTUAL PROPERTY
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800">知识产权体系</h2>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-6 opacity-70"></div>
|
|
<p class="text-slate-600 font-medium text-lg">坚持自主创新，构建完善的知识产权保护体系与资质认证</p>
|
|
</div>
|
|
|
|
<div class="glass-panel-light border border-white rounded-3xl p-8 md:p-12 mb-12 reveal shadow-lg">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between mb-8 pb-4 border-b border-slate-200">
|
|
<h3 class="text-2xl font-bold text-slate-800 flex items-center mb-4 sm:mb-0 border-l-4 border-primary pl-4">
|
|
软著著作
|
|
</h3>
|
|
<span class="bg-blue-50 text-primary font-bold px-4 py-2 rounded-lg border border-blue-100">11 项软件著作权</span>
|
|
</div>
|
|
<div class="ip-grid-container">
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/WingIDE创建项目平台1-1.jpg" alt="WingIDE创建项目平台" draggable="false">
|
|
<p>WingIDE创建项目平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/Maotu软件前端平台1-1.jpg" alt="Maotu软件前端平台" draggable="false">
|
|
<p>Maotu软件前端平台</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/MaotuArc-Studio后端系统1-1.jpg" alt="MaotuArc-Studio后端系统" draggable="false">
|
|
<p>MaotuArc-Studio后端系统</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/CBT工具软件1-1.jpg" alt="CBT工具软件" draggable="false">
|
|
<p>CBT工具软件</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/Wing-M130处理器IP核软件-1.jpg" alt="Wing-M130处理器IP核软件" draggable="false">
|
|
<p>Wing-M130处理器IP核软件</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/WingIDE插件快速配置系统V1_0软著证书-1.jpg" alt="快配系统" draggable="false">
|
|
<p>WingIDE插件快速配置系统</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
|
|
<div class="glass-panel-light border border-white rounded-3xl p-8 md:p-12 reveal shadow-lg">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between mb-8 pb-4 border-b border-slate-200">
|
|
<h3 class="text-2xl font-bold text-slate-800 flex items-center mb-4 sm:mb-0 border-l-4 border-accent pl-4">
|
|
资质认证
|
|
</h3>
|
|
<span class="bg-blue-50 text-accent font-bold px-4 py-2 rounded-lg border border-blue-100">5 项认证</span>
|
|
</div>
|
|
<div class="ip-grid-container" style="grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));">
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/南京隼瞻QMS-中文正式ISO9001-1.jpg" alt="QMS中" draggable="false" style="aspect-ratio:3/4;">
|
|
<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="QMS英" draggable="false" style="aspect-ratio:3/4;">
|
|
<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="ISO26262" draggable="false" style="aspect-ratio:3/4;">
|
|
<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="广州QMS中" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>QMS广州(中)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司英文-1.jpg" alt="广州QMS英" draggable="false" style="aspect-ratio:3/4;">
|
|
<p>QMS广州(英)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== 发展历程 ========== -->
|
|
<div id="history" class="tab-content hidden">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-16 reveal">
|
|
<div class="inline-block px-3 py-1 glass-panel border border-white rounded-full text-primary text-xs font-bold mb-4 shadow-sm">
|
|
MILESTONES
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800">隼瞻科技里程碑</h2>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-6 opacity-70"></div>
|
|
</div>
|
|
|
|
<style>
|
|
.horiz-timeline-wrapper { cursor: grab; }
|
|
.horiz-timeline-wrapper:active { cursor: grabbing; }
|
|
.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 no-scrollbar" 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-1 bg-slate-200 rounded-full z-0 -translate-y-1/2"></div>
|
|
<div class="absolute top-[215px] left-8 w-0 h-1 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(59,130,246,0.3)]" 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-white text-primary border-2 border-primary px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-md">2023</span>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">隼瞻科技正式成立</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">2月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold 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-white text-primary border-2 border-primary px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-md">2024</span>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">Wing-M130通用高性能嵌入式RISC-V微控制器发布</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">8月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">Wing-M050S、Wing-M130S面向嵌入式领域信息安全处理器发布</p>
|
|
</div>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">获ISO 26262:2018功能安全ASIL D产品认证证书</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">11月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold 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-white text-primary border-2 border-primary px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-md">2025</span>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">Wing-M510面向高可靠性高性能应用的RISC-V发布</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">1月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">DSA处理器敏捷开发平台ArchitStudio发布</p>
|
|
</div>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">端侧AI CPU+NPU融合解决方案"智翼"发布</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">7月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">Wing-A500多核RISC-V应用处理器发布</p>
|
|
</div>
|
|
</div>
|
|
<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 text-center mb-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold leading-relaxed">主办"RISC-V x AI生态大会暨ArchitStudio用户大会"</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="font-bold text-primary mt-8 group-hover:-translate-y-1 transition-all duration-300 absolute top-[55%] text-base md:text-lg">12月</div>
|
|
</div>
|
|
<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 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-white border-4 border-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group-hover:bg-primary transition-all duration-300 shadow-sm"></div>
|
|
<div class="w-1 h-8 bg-slate-300 group-hover:bg-primary transition-colors duration-300"></div>
|
|
<div class="h-[140px] w-full timeline-card flex items-center justify-center p-5 text-center mt-6">
|
|
<p class="text-slate-700 text-sm md:text-base font-bold 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-primary text-white border-2 border-primary px-4 md:px-6 py-2 rounded-full font-bold text-sm md:text-xl shadow-lg animate-pulse">2026</span>
|
|
</div>
|
|
<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 text-center mb-6 border-primary border-2 bg-blue-50/50">
|
|
<p class="text-slate-800 text-sm md:text-base font-extrabold leading-relaxed">通过专精特新中小企业认定</p>
|
|
</div>
|
|
<div class="w-1 h-8 bg-primary transition-colors duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]"></div>
|
|
<div class="w-4 md:w-5 h-4 md:h-5 rounded-full bg-primary border-4 border-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 shadow-[0_0_15px_rgba(59,130,246,0.8)] scale-110"></div>
|
|
<div class="font-extrabold text-primary mt-8 absolute top-[55%] text-base md:text-lg">1月</div>
|
|
</div>
|
|
|
|
<div class="w-16 shrink-0"></div> <!-- 右侧占位 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 glass-panel border border-white rounded-full text-primary text-xs font-bold mb-4 shadow-sm">
|
|
CORPORATE CULTURE
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-4 text-slate-800">企业文化</h2>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-6 opacity-70"></div>
|
|
<p class="text-slate-600 max-w-lg mx-auto font-medium">求实、致远、热忱、敬畏 -- 驱动我们不断前行的精神内核</p>
|
|
</div>
|
|
|
|
<!-- 文化核心理念 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
<div class="reveal-left">
|
|
<div class="hover-card glass-panel rounded-3xl border border-white overflow-hidden h-full shadow-lg">
|
|
<div class="h-2 bg-gradient-to-r from-primary via-accent to-primary"></div>
|
|
<div class="p-8 pb-10">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mr-4 border border-blue-100 shadow-sm text-primary">
|
|
<i class="fa fa-lightbulb-o text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-slate-800">创新驱动</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-8 leading-relaxed font-medium text-justify">
|
|
我们坚信技术创新是推动行业进步的核心动力。公司鼓励每一位成员大胆探索、勇于突破，在DSA处理器设计领域不断挑战技术边界。
|
|
</p>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-primary">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">鼓励技术探索与方法学创新</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-primary">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">开放包容的技术交流氛围</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-primary">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">定期举办内部技术分享与研讨</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal-right">
|
|
<div class="hover-card glass-panel rounded-3xl border border-white overflow-hidden h-full shadow-lg">
|
|
<div class="h-2 bg-gradient-to-r from-green-400 via-teal-400 to-green-400"></div>
|
|
<div class="p-8 pb-10">
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mr-4 border border-green-100 shadow-sm text-green-500">
|
|
<i class="fa fa-users text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-slate-800">团队协作</h3>
|
|
</div>
|
|
<p class="text-slate-600 mb-8 leading-relaxed font-medium text-justify">
|
|
在处理器设计这一高度复杂的系统工程中，我们深知团队协作的重要性。公司构建了扁平化的组织结构，促进高效的跨部门协同。
|
|
</p>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-green-50 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-green-600">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">扁平化管理，高效决策</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-green-50 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-green-600">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">跨部门协作，资源共享</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<div class="w-6 h-6 bg-green-50 rounded flex items-center justify-center mr-3 mt-0.5 flex-shrink-0 text-green-600">
|
|
<i class="fa fa-check text-xs"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-medium">共同目标驱动，共享成功喜悦</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 glass-panel p-8 md:p-10 rounded-3xl border border-white shadow-sm">
|
|
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-6 shadow-sm border border-purple-100 text-purple-500">
|
|
<i class="fa fa-line-chart text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4 text-slate-800">职业发展</h3>
|
|
<p class="text-slate-600 font-medium mb-8 leading-relaxed">
|
|
完善的培训体系和清晰的晋升通道，帮助每一位成员实现个人价值与职业理想。
|
|
</p>
|
|
<div class="space-y-5">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center flex-shrink-0 text-purple-600 shadow-inner">
|
|
<i class="fa fa-graduation-cap"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">系统性技术培训与管理培训</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center flex-shrink-0 text-purple-600 shadow-inner">
|
|
<i class="fa fa-trophy"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">技术专家与管理双通道晋升</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-purple-50 rounded-xl flex items-center justify-center flex-shrink-0 text-purple-600 shadow-inner">
|
|
<i class="fa fa-globe"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">参与行业前沿项目的机会</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reveal hover-card glass-panel p-8 md:p-10 rounded-3xl border border-white shadow-sm" style="transition-delay:0.15s;">
|
|
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-6 shadow-sm border border-orange-100 text-orange-500">
|
|
<i class="fa fa-home text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4 text-slate-800">工作环境</h3>
|
|
<p class="text-slate-600 font-medium mb-8 leading-relaxed">
|
|
舒适、开放、充满活力的办公环境，让创造力自由生长。
|
|
</p>
|
|
<div class="space-y-5">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center flex-shrink-0 text-orange-500 shadow-inner">
|
|
<i class="fa fa-building"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">开放式办公空间促进协作交流</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center flex-shrink-0 text-orange-500 shadow-inner">
|
|
<i class="fa fa-heartbeat"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">完善的福利与健康保障体系</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center flex-shrink-0 text-orange-500 shadow-inner">
|
|
<i class="fa fa-coffee"></i>
|
|
</div>
|
|
<span class="text-slate-700 font-bold">灵活工作时间与丰富团队活动</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文化活动展示 -->
|
|
<div class="reveal">
|
|
<div class="text-center mb-10">
|
|
<h3 class="text-2xl md:text-3xl font-extrabold text-slate-800 mb-4">我们的生活</h3>
|
|
<div class="w-12 h-1 bg-primary mx-auto rounded-full mb-4 opacity-70"></div>
|
|
<p class="text-slate-600 font-medium">工作之余，丰富多彩的文化活动</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
|
|
<div class="hover-card group rounded-3xl overflow-hidden glass-panel border border-white shadow-sm">
|
|
<div class="h-48 bg-blue-50 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 hex-pattern opacity-40 mix-blend-multiply"></div>
|
|
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-sm z-10 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-code text-4xl text-blue-500"></i>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-white/60">
|
|
<h4 class="font-bold text-xl text-slate-800 mb-2">技术分享会</h4>
|
|
<p class="text-slate-600 font-medium text-sm">定期举办技术分享，促进知识交流</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group rounded-3xl overflow-hidden glass-panel border border-white shadow-sm">
|
|
<div class="h-48 bg-green-50 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 dot-pattern opacity-40 mix-blend-multiply"></div>
|
|
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-sm z-10 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-futbol-o text-4xl text-green-500"></i>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-white/60">
|
|
<h4 class="font-bold text-xl text-slate-800 mb-2">运动赛事</h4>
|
|
<p class="text-slate-600 font-medium text-sm">组织各类运动赛事，强健体魄</p>
|
|
</div>
|
|
</div>
|
|
<div class="hover-card group rounded-3xl overflow-hidden glass-panel border border-white shadow-sm">
|
|
<div class="h-48 bg-orange-50 flex items-center justify-center relative overflow-hidden">
|
|
<div class="absolute inset-0 circuit-pattern !opacity-20 mix-blend-multiply"></div>
|
|
<div class="w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-sm z-10 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fa fa-tree text-4xl text-orange-500"></i>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-white/60">
|
|
<h4 class="font-bold text-xl text-slate-800 mb-2">团建活动</h4>
|
|
<p class="text-slate-600 font-medium text-sm">丰富多彩的团队建设活动</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ==================== 返回顶部 ==================== -->
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 w-14 h-14 bg-white text-primary rounded-full flex items-center justify-center shadow-[0_8px_20px_rgba(59,130,246,0.3)] opacity-0 invisible transition-all duration-300 hover:scale-110 focus:outline-none z-50 border border-blue-100">
|
|
<i class="fa fa-arrow-up text-xl"></i>
|
|
</button>
|
|
|
|
<!-- ==================== JavaScript ==================== -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
'use strict';
|
|
|
|
// ===== 标签页切换 =====
|
|
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-primary');
|
|
btn.classList.add('text-slate-500');
|
|
});
|
|
button.classList.add('active', 'text-primary');
|
|
button.classList.remove('text-slate-500');
|
|
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 * 30);
|
|
}
|
|
});
|
|
}
|
|
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' });
|
|
});
|
|
}
|
|
|
|
// ===== 拖拽水平滚动 (Timeline) =====
|
|
const slider = document.getElementById('timeline-container');
|
|
if (slider) {
|
|
let isDown = false;
|
|
let startX;
|
|
let scrollLeft;
|
|
let autoScrollSpeed = 0;
|
|
let isHovering = false;
|
|
const edgeThreshold = 150;
|
|
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;
|
|
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>
|
|
</body>
|
|
</html>
|