932 lines
52 KiB
HTML
932 lines
52 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&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
screens: {
|
|
'tablet': '1024px',
|
|
// 保留默认断点但调整顺序
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1280px',
|
|
'xl': '1536px',
|
|
},
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF',
|
|
secondary: '#0E42D2',
|
|
accent: '#69b1ff',
|
|
dark: '#0f172a',
|
|
light: '#f8fafc',
|
|
darkBg: '#1e293b',
|
|
darkerBg: '#0f172a',
|
|
darkCard: '#334155'
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.bg-grid {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23334155' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
.team-card {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.team-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
.timeline-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -29px;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background-color: #475569;
|
|
}
|
|
.timeline-item:last-child::before {
|
|
height: 50%;
|
|
}
|
|
@keyframes gradientFlow {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
.gradient-animate {
|
|
background-size: 200% 200%;
|
|
animation: gradientFlow 15s ease infinite;
|
|
}
|
|
|
|
/* 图片网格样式 - 静态展示无悬浮效果 */
|
|
.ip-grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 16px;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.ip-grid-item {
|
|
background: #1e293b;
|
|
border-radius: 12px;
|
|
border: 1px solid #475569;
|
|
padding: 8px;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.ip-grid-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
aspect-ratio: 3/4;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.ip-grid-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.ip-grid-item p {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
color: #cbd5e1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* 横版图片 */
|
|
.ip-grid-item-horizontal img {
|
|
aspect-ratio: 4/3;
|
|
}
|
|
|
|
/* 两列布局 */
|
|
.ip-two-col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 32px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ip-two-col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 图片预览弹窗 - 已禁用 */
|
|
.image-preview-overlay {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 堆叠提示 - 已禁用 */
|
|
.stack-hint {
|
|
display: none;
|
|
}
|
|
|
|
.stack-count {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-inter bg-darkerBg text-gray-200 min-h-screen flex flex-col">
|
|
|
|
<!-- 关于我们页面头部 -->
|
|
<section class="pt-24 md:pt-32 pb-16 md:pb-24 bg-gradient-to-br from-darkBg to-darkerBg overflow-hidden gradient-animate">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-6">
|
|
关于我们
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
|
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具
|
|
</p>
|
|
<div class="w-24 h-1 bg-primary mx-auto"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 关于我们标签页导航 -->
|
|
<section class="py-8 bg-darkBg sticky top-16 z-40 border-b border-gray-700 shadow-sm">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<div class="flex overflow-x-auto no-scrollbar gap-6 md:justify-center">
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-primary border-b-2 border-primary" data-tab="company-profile">
|
|
公司简介
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="vision">
|
|
愿景与使命
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="ip">
|
|
知识产权
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="history">
|
|
发展历程
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="team">
|
|
团队介绍
|
|
</button>
|
|
<button class="tab-btn whitespace-nowrap py-3 px-1 text-sm font-medium text-gray-400" data-tab="culture">
|
|
企业文化
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 关于我们内容部分 -->
|
|
<section id="about" class="py-16 md:py-24 bg-darkBg">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<!-- 公司简介 -->
|
|
<div id="company-profile" class="tab-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 class="text-3xl font-bold mb-6 text-white">公司简介</h2>
|
|
<p class="text-gray-300 mb-6">
|
|
隼瞻科技成立于2015年，是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司。公司总部位于中国上海，并在北京、深圳等地设有分支机构。
|
|
</p>
|
|
<p class="text-gray-300 mb-6">
|
|
隼瞻科技的核心团队来自国内外顶尖的半导体公司和研究机构，拥有丰富的处理器设计、EDA工具开发和系统集成经验。我们致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具，帮助客户加速产品创新，提升市场竞争力。
|
|
</p>
|
|
<p class="text-gray-300 mb-6">
|
|
多年来，隼瞻科技凭借卓越的技术实力和优质的服务，已经成为半导体行业的重要供应商之一。我们的客户遍布全球，包括芯片设计公司、电子设备制造商、物联网设备供应商等多个领域。
|
|
</p>
|
|
<div class="grid grid-cols-2 gap-4 mb-8">
|
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
|
<h3 class="text-xl font-bold mb-1 text-primary">50+</h3>
|
|
<p class="text-gray-300">全球客户</p>
|
|
</div>
|
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
|
<h3 class="text-xl font-bold mb-1 text-primary">100+</h3>
|
|
<p class="text-gray-300">专业技术人员</p>
|
|
</div>
|
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
|
<h3 class="text-xl font-bold mb-1 text-primary">30+</h3>
|
|
<p class="text-gray-300">核心技术专利</p>
|
|
</div>
|
|
<div class="bg-primary/10 p-4 rounded-lg border border-gray-700">
|
|
<h3 class="text-xl font-bold mb-1 text-primary">8+</h3>
|
|
<p class="text-gray-300">行业解决方案</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-xl overflow-hidden shadow-xl">
|
|
<img src="https://picsum.photos/id/1/1200/800" alt="隼瞻科技公司" class="w-full h-auto object-cover">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 愿景与使命 -->
|
|
<div id="vision" class="tab-content hidden">
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">愿景与使命</h2>
|
|
<p class="text-gray-300">我们致力于成为全球领先的半导体技术解决方案供应商</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
|
|
<i class="fa fa-eye text-primary text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4 text-white">我们的愿景</h3>
|
|
<p class="text-gray-300">
|
|
成为全球领先的半导体技术解决方案供应商，通过持续创新和卓越服务，推动半导体行业的发展，为客户创造价值，为社会做出贡献。
|
|
</p>
|
|
</div>
|
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
|
<div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6">
|
|
<i class="fa fa-bullseye text-primary text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4 text-white">我们的使命</h3>
|
|
<p class="text-gray-300">
|
|
通过提供高性能、低功耗的处理器IP和先进的EDA设计工具，帮助客户加速产品创新，提升市场竞争力，共同推动技术进步和产业升级。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-12 bg-darkerBg p-8 border border-gray-700 rounded-xl shadow-md">
|
|
<h3 class="text-2xl font-bold mb-6 text-white text-center">我们的价值观</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="text-center">
|
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-lightbulb-o text-primary text-xl"></i>
|
|
</div>
|
|
<h4 class="text-lg font-semibold mb-2 text-white">创新</h4>
|
|
<p class="text-gray-300">持续创新是我们发展的动力</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-thumbs-up text-primary text-xl"></i>
|
|
</div>
|
|
<h4 class="text-lg font-semibold mb-2 text-white">卓越</h4>
|
|
<p class="text-gray-300">追求卓越是我们永恒的目标</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-users text-primary text-xl"></i>
|
|
</div>
|
|
<h4 class="text-lg font-semibold mb-2 text-white">协作</h4>
|
|
<p class="text-gray-300">团队协作是我们成功的基石</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-handshake-o text-primary text-xl"></i>
|
|
</div>
|
|
<h4 class="text-lg font-semibold mb-2 text-white">诚信</h4>
|
|
<p class="text-gray-300">诚信经营是我们的基本原则</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 知识产权 -->
|
|
<div id="ip" class="tab-content hidden">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">知识产权体系</h2>
|
|
<p class="text-gray-300">
|
|
坚持自主创新，构建完善的知识产权保护体系与资质认证
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 1. 软著著作 -->
|
|
<div class="mb-12">
|
|
<div class="flex items-center mb-6">
|
|
<h3 class="text-2xl font-bold text-white flex items-center">
|
|
<span class="w-2 h-8 bg-secondary mr-4 rounded-sm"></span>
|
|
软著著作
|
|
</h3>
|
|
<span class="ml-4 text-gray-400 text-sm">11 项软件著作权</span>
|
|
</div>
|
|
<div class="ip-grid-container">
|
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/WingIDE创建项目平台1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>WingIDE创建项目平台</p>
|
|
</div>
|
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/Maotu软件前端平台1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>Maotu软件前端平台</p>
|
|
</div>
|
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/MaotuArc-Studio后端系统1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>MaotuArc-Studio后端系统</p>
|
|
</div>
|
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/CBT工具软件1-1.jpg" alt="软件著作权" draggable="false">
|
|
<p>CBT工具软件</p>
|
|
</div>
|
|
<div class="ip-grid-item ip-grid-item-horizontal">
|
|
<img src="https://www.beiyuxing.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 ip-grid-item-horizontal">
|
|
<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 ip-grid-item-horizontal">
|
|
<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 ip-grid-item-horizontal">
|
|
<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 ip-grid-item-horizontal">
|
|
<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 ip-grid-item-horizontal">
|
|
<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 ip-grid-item-horizontal">
|
|
<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>
|
|
|
|
<!-- 2. 资质认证 & 商标注册 两列布局 -->
|
|
<div class="ip-two-col mb-12">
|
|
<!-- 资质认证 -->
|
|
<div>
|
|
<div class="flex items-center mb-6">
|
|
<h3 class="text-2xl font-bold text-white flex items-center">
|
|
<span class="w-2 h-8 bg-accent mr-4 rounded-sm"></span>
|
|
资质认证
|
|
</h3>
|
|
<span class="ml-4 text-gray-400 text-sm">5 项资质认证</span>
|
|
</div>
|
|
<div class="ip-grid-container" style="grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));">
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/南京隼瞻QMS-中文正式ISO9001-1.jpg" alt="资质认证" draggable="false">
|
|
<p>南京隼瞻QMS(中)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/南京隼瞻QMS-英文正式ISO9001-1.jpg" alt="资质认证" draggable="false">
|
|
<p>南京隼瞻QMS(英)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/SGS认证ISO-26262车规-1.jpg" alt="资质认证" draggable="false">
|
|
<p>SGS ISO-26262车规</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司中文-1.jpg" alt="资质认证" draggable="false">
|
|
<p>QMS广州(中)</p>
|
|
</div>
|
|
<div class="ip-grid-item">
|
|
<img src="https://www.beiyuxing.tech/wp-content/uploads/2026/01/QMS-隼瞻科技（广州）有限公司英文-1.jpg" alt="资质认证" draggable="false">
|
|
<p>QMS广州(英)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 发展历程 -->
|
|
<div id="history" class="tab-content hidden">
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">发展历程</h2>
|
|
<p class="text-gray-300">隼瞻科技的成长与发展历程</p>
|
|
</div>
|
|
<div class="relative pl-10">
|
|
<!-- 2015 -->
|
|
<div class="timeline-item relative mb-12">
|
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
|
<i class="fa fa-flag"></i>
|
|
</div>
|
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
|
<h3 class="text-xl font-bold mb-2 text-white">2015年</h3>
|
|
<p class="text-gray-300">
|
|
隼瞻科技在上海成立，开始专注于处理器IP和EDA工具的研发。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 2017 -->
|
|
<div class="timeline-item relative mb-12">
|
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
|
<i class="fa fa-rocket"></i>
|
|
</div>
|
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
|
<h3 class="text-xl font-bold mb-2 text-white">2017年</h3>
|
|
<p class="text-gray-300">
|
|
发布首款自主研发的处理器IP产品，获得首批客户认可。同年在北京设立研发中心。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 2019 -->
|
|
<div class="timeline-item relative mb-12">
|
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
|
<i class="fa fa-line-chart"></i>
|
|
</div>
|
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
|
<h3 class="text-xl font-bold mb-2 text-white">2019年</h3>
|
|
<p class="text-gray-300">
|
|
完成A轮融资，公司规模扩大至50人。发布首款EDA设计平台，形成完整的产品线。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 2021 -->
|
|
<div class="timeline-item relative mb-12">
|
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
|
<i class="fa fa-globe"></i>
|
|
</div>
|
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
|
<h3 class="text-xl font-bold mb-2 text-white">2021年</h3>
|
|
<p class="text-gray-300">
|
|
完成B轮融资，在深圳设立销售中心，开始拓展国际市场。客户数量突破30家。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 2023 -->
|
|
<div class="timeline-item relative">
|
|
<div class="absolute left-[-38px] top-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center z-10">
|
|
<i class="fa fa-trophy"></i>
|
|
</div>
|
|
<div class="bg-darkerBg p-6 rounded-xl shadow-md border-l-4 border-primary">
|
|
<h3 class="text-xl font-bold mb-2 text-white">2023年</h3>
|
|
<p class="text-gray-300">
|
|
公司规模扩大至100人，发布新一代高性能处理器IP和先进EDA设计工具，客户遍布全球多个国家和地区。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 团队介绍 -->
|
|
<div id="team" class="tab-content hidden">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">团队介绍</h2>
|
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
|
我们拥有一支高素质、经验丰富的专业团队，致力于为客户提供最优质的产品和服务
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- 团队成员1 -->
|
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
|
<img src="https://picsum.photos/id/1005/400/400" alt="张三 - CEO" class="w-full h-64 object-cover">
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-xl font-bold mb-1 text-white">张三</h3>
|
|
<p class="text-primary font-medium mb-3">首席执行官 (CEO)</p>
|
|
<p class="text-gray-300 text-sm mb-4">
|
|
前某国际半导体公司高级副总裁，拥有20年半导体行业经验，专注于处理器设计和企业管理。
|
|
</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 团队成员2 -->
|
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
|
<img src="https://picsum.photos/id/1006/400/400" alt="李四 - CTO" class="w-full h-64 object-cover">
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-xl font-bold mb-1 text-white">李四</h3>
|
|
<p class="text-primary font-medium mb-3">首席技术官 (CTO)</p>
|
|
<p class="text-gray-300 text-sm mb-4">
|
|
前某知名芯片设计公司技术总监，拥有15年处理器架构设计经验，在高性能计算领域有深厚造诣。
|
|
</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-github"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 团队成员3 -->
|
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
|
<img src="https://picsum.photos/id/1009/400/400" alt="王五 - COO" class="w-full h-64 object-cover">
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-xl font-bold mb-1 text-white">王五</h3>
|
|
<p class="text-primary font-medium mb-3">首席运营官 (COO)</p>
|
|
<p class="text-gray-300 text-sm mb-4">
|
|
前某科技公司运营总监，拥有丰富的企业运营和供应链管理经验，擅长优化业务流程和提升效率。
|
|
</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-weixin"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 团队成员4 -->
|
|
<div class="bg-darkerBg rounded-xl overflow-hidden shadow-lg team-card border border-gray-700">
|
|
<img src="https://picsum.photos/id/1011/400/400" alt="赵六 - CFO" class="w-full h-64 object-cover">
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-xl font-bold mb-1 text-white">赵六</h3>
|
|
<p class="text-primary font-medium mb-3">首席财务官 (CFO)</p>
|
|
<p class="text-gray-300 text-sm mb-4">
|
|
前某投资银行高级分析师，拥有丰富的融资和财务管理经验，曾参与多家科技公司的上市和融资项目。
|
|
</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-primary transition-colors">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-12">
|
|
<p class="text-gray-300 mb-6">
|
|
我们的团队由来自国内外顶尖半导体公司和研究机构的专业人才组成，
|
|
他们拥有丰富的经验和深厚的技术积累，是公司最宝贵的财富。
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-6 mb-8">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
|
<i class="fa fa-graduation-cap text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-white">博士占比</h4>
|
|
<p class="text-gray-300">30%</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
|
<i class="fa fa-users text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-white">团队规模</h4>
|
|
<p class="text-gray-300">100+</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
|
<i class="fa fa-globe text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-white">国际化程度</h4>
|
|
<p class="text-gray-300">20%</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-3">
|
|
<i class="fa fa-briefcase text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-white">平均经验</h4>
|
|
<p class="text-gray-300">10+ 年</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 企业文化 -->
|
|
<div id="culture" class="tab-content hidden">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">企业文化</h2>
|
|
<p class="text-gray-300">隼瞻科技的企业文化是我们共同的价值观和行为准则</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
|
<h3 class="text-2xl font-bold mb-4 text-white">工作环境</h3>
|
|
<p class="text-gray-300 mb-6">
|
|
我们致力于为员工创造舒适、开放、创新的工作环境，鼓励员工充分发挥自己的才能和创造力。
|
|
</p>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">开放的办公空间，促进团队协作和沟通</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">完善的福利体系，包括五险一金、带薪年假、健康体检等</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">丰富的团队活动，增强团队凝聚力</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">灵活的工作时间，平衡工作和生活</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
|
<h3 class="text-2xl font-bold mb-4 text-white">职业发展</h3>
|
|
<p class="text-gray-300 mb-6">
|
|
我们重视员工的职业发展，提供丰富的培训和晋升机会，帮助员工实现个人价值和职业目标。
|
|
</p>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">完善的培训体系，包括技术培训、管理培训等</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">清晰的晋升通道，为有能力的员工提供更广阔的发展空间</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">内部轮岗机会，丰富员工的工作经验</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span class="text-gray-300">参与行业前沿项目的机会，提升技术水平</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="bg-darkerBg p-8 rounded-xl shadow-lg border border-gray-700">
|
|
<h3 class="text-2xl font-bold mb-6 text-white text-center">我们的文化活动</h3>
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
|
<img src="https://picsum.photos/id/1025/400/250" alt="团建活动" class="w-full h-40 object-cover">
|
|
<div class="p-4">
|
|
<h4 class="font-semibold text-white mb-2">团建活动</h4>
|
|
<p class="text-gray-300 text-sm">定期组织团队建设活动，增强团队凝聚力</p>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
|
<img src="https://picsum.photos/id/1076/400/250" alt="技术分享会" class="w-full h-40 object-cover">
|
|
<div class="p-4">
|
|
<h4 class="font-semibold text-white mb-2">技术分享会</h4>
|
|
<p class="text-gray-300 text-sm">每周举办技术分享会，促进知识交流和分享</p>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg overflow-hidden border border-gray-600">
|
|
<img src="https://picsum.photos/id/1043/400/250" alt="运动赛事" class="w-full h-40 object-cover">
|
|
<div class="p-4">
|
|
<h4 class="font-semibold text-white mb-2">运动赛事</h4>
|
|
<p class="text-gray-300 text-sm">组织各类运动赛事，丰富员工的业余生活</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 合作伙伴 -->
|
|
<section class="py-16 md:py-24 bg-gradient-to-br from-darkBg to-darkerBg">
|
|
<div class="container mx-auto px-4 md:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold mb-6 text-white">合作伙伴</h2>
|
|
<p class="text-gray-300 max-w-2xl mx-auto">
|
|
我们与众多优秀的企业和机构建立了长期稳定的合作关系，共同推动半导体行业的发展
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
|
|
<!-- 合作伙伴标志 -->
|
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
|
<img src="https://picsum.photos/id/100/200/100" alt="合作伙伴1" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
|
</div>
|
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
|
<img src="https://picsum.photos/id/101/200/100" alt="合作伙伴2" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
|
</div>
|
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
|
<img src="https://picsum.photos/id/102/200/100" alt="合作伙伴3" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
|
</div>
|
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
|
<img src="https://picsum.photos/id/103/200/100" alt="合作伙伴4" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
|
</div>
|
|
<div class="w-32 h-16 bg-darkerBg rounded-lg shadow-md flex items-center justify-center p-4 border border-gray-700">
|
|
<img src="https://picsum.photos/id/104/200/100" alt="合作伙伴5" class="max-w-full max-h-full object-contain grayscale hover:grayscale-0 transition-all duration-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// 标签页切换 (确保在脚本开始时执行)
|
|
const tabButtons = document.querySelectorAll('.tab-btn');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// 移除所有标签按钮的active状态
|
|
tabButtons.forEach(btn => {
|
|
btn.classList.remove('text-primary', 'border-b-2', 'border-primary');
|
|
btn.classList.add('text-gray-400');
|
|
});
|
|
|
|
// 添加当前标签按钮的active状态
|
|
button.classList.add('text-primary', 'border-b-2', 'border-primary');
|
|
button.classList.remove('text-gray-400');
|
|
|
|
// 隐藏所有标签内容
|
|
tabContents.forEach(content => {
|
|
content.classList.add('hidden');
|
|
});
|
|
|
|
// 显示当前标签内容
|
|
const tabId = button.getAttribute('data-tab');
|
|
const activeContent = document.getElementById(tabId);
|
|
if(activeContent) {
|
|
activeContent.classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 返回顶部按钮
|
|
const backToTop = document.getElementById('back-to-top');
|
|
|
|
// 只有当存在 back-to-top 元素时才添加事件监听，避免报错
|
|
if (backToTop) {
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
backToTop.classList.remove('opacity-0', 'invisible');
|
|
backToTop.classList.add('opacity-100', 'visible');
|
|
} else {
|
|
backToTop.classList.add('opacity-0', 'invisible');
|
|
backToTop.classList.remove('opacity-100', 'visible');
|
|
}
|
|
});
|
|
|
|
// 返回顶部按钮
|
|
backToTop.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// 平滑滚动
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId && targetId !== '#') {
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
if (targetElement) {
|
|
window.scrollTo({
|
|
top: targetElement.offsetTop - 80,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 图片预览功能
|
|
(function() {
|
|
const overlay = document.getElementById('image-preview-overlay');
|
|
const previewImage = document.getElementById('preview-image');
|
|
const previewTitle = document.getElementById('preview-title');
|
|
const closeBtn = document.getElementById('preview-close');
|
|
const prevBtn = document.getElementById('preview-prev');
|
|
const nextBtn = document.getElementById('preview-next');
|
|
|
|
let currentImages = [];
|
|
let currentIndex = 0;
|
|
let currentCategory = '';
|
|
|
|
// 收集所有图片
|
|
function collectImages(category) {
|
|
const group = document.querySelector(`.stack-group[data-category="${category}"]`);
|
|
if (!group) return [];
|
|
|
|
const items = group.querySelectorAll('.stack-item');
|
|
return Array.from(items).map(item => ({
|
|
src: item.getAttribute('data-src'),
|
|
title: item.getAttribute('data-title')
|
|
}));
|
|
}
|
|
|
|
// 显示预览
|
|
function showPreview(category, index) {
|
|
currentCategory = category;
|
|
currentImages = collectImages(category);
|
|
currentIndex = index;
|
|
|
|
if (currentImages.length === 0) return;
|
|
|
|
updatePreviewImage();
|
|
overlay.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// 更新预览图片
|
|
function updatePreviewImage() {
|
|
const current = currentImages[currentIndex];
|
|
if (!current) return;
|
|
|
|
previewImage.src = current.src;
|
|
previewTitle.textContent = current.title;
|
|
|
|
// 更新导航按钮状态
|
|
prevBtn.style.opacity = currentIndex === 0 ? '0.3' : '0.7';
|
|
nextBtn.style.opacity = currentIndex === currentImages.length - 1 ? '0.3' : '0.7';
|
|
}
|
|
|
|
// 关闭预览
|
|
function closePreview() {
|
|
overlay.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// 上一张
|
|
function prevImage() {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
updatePreviewImage();
|
|
}
|
|
}
|
|
|
|
// 下一张
|
|
function nextImage() {
|
|
if (currentIndex < currentImages.length - 1) {
|
|
currentIndex++;
|
|
updatePreviewImage();
|
|
}
|
|
}
|
|
|
|
// 绑定堆叠图片点击事件
|
|
document.querySelectorAll('.stack-item').forEach((item, idx) => {
|
|
item.addEventListener('click', function() {
|
|
const group = this.closest('.stack-group');
|
|
const category = group.getAttribute('data-category');
|
|
const items = Array.from(group.querySelectorAll('.stack-item'));
|
|
const index = items.indexOf(this);
|
|
showPreview(category, index);
|
|
});
|
|
});
|
|
|
|
// 关闭按钮
|
|
closeBtn.addEventListener('click', closePreview);
|
|
|
|
// 点击遮罩关闭
|
|
overlay.addEventListener('click', function(e) {
|
|
if (e.target === overlay) {
|
|
closePreview();
|
|
}
|
|
});
|
|
|
|
// 导航按钮
|
|
prevBtn.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
prevImage();
|
|
});
|
|
|
|
nextBtn.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
nextImage();
|
|
});
|
|
|
|
// 键盘导航
|
|
document.addEventListener('keydown', function(e) {
|
|
if (!overlay.classList.contains('active')) return;
|
|
|
|
switch(e.key) {
|
|
case 'Escape':
|
|
closePreview();
|
|
break;
|
|
case 'ArrowLeft':
|
|
prevImage();
|
|
break;
|
|
case 'ArrowRight':
|
|
nextImage();
|
|
break;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |