940 lines
52 KiB
HTML
940 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: '#3b82f6',
|
|
secondary: '#0E42D2',
|
|
accent: '#69b1ff',
|
|
dark: '#0f172a',
|
|
light: '#f8fafc',
|
|
darkBg: '#ffffff',
|
|
darkerBg: '#f8fafc',
|
|
darkCard: '#ffffff'
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.text-shadow {
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.bg-grid {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23334155' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
|
|
/* 修复桌面端子菜单显示问题 */
|
|
.dropdown-submenu:hover > .submenu {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
transform: scale(1) !important;
|
|
}
|
|
|
|
.submenu {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
}
|
|
|
|
/* 确保三级菜单有足够的z-index */
|
|
.submenu-level-3 {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* 全宽度mega菜单样式 */
|
|
.nav-mega-menu {
|
|
position: static;
|
|
}
|
|
|
|
.mega-dropdown {
|
|
top: 100%;
|
|
}
|
|
|
|
/* mega菜单卡片hover效果 */
|
|
.mega-menu-item {
|
|
min-height: 140px;
|
|
}
|
|
|
|
.mega-menu-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* 移除移动端按钮的焦点和激活状态的蓝色底框 */
|
|
#mobile-menu-button,
|
|
.mobile-dropdown-toggle {
|
|
outline: none !important;
|
|
-webkit-tap-highlight-color: transparent !important;
|
|
-webkit-touch-callout: none !important;
|
|
-webkit-user-select: none !important;
|
|
-moz-user-select: none !important;
|
|
-ms-user-select: none !important;
|
|
user-select: none !important;
|
|
}
|
|
|
|
#mobile-menu-button:focus,
|
|
#mobile-menu-button:active,
|
|
#mobile-menu-button:hover,
|
|
.mobile-dropdown-toggle:focus,
|
|
.mobile-dropdown-toggle:active,
|
|
.mobile-dropdown-toggle:hover {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* ========== 移动端菜单动效 ========== */
|
|
|
|
/* 汉堡按钮动效 */
|
|
.hamburger {
|
|
width: 24px;
|
|
height: 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hamburger span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: currentColor;
|
|
border-radius: 2px;
|
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.hamburger.active span:nth-child(1) {
|
|
transform: translateY(9px) rotate(45deg);
|
|
}
|
|
|
|
.hamburger.active span:nth-child(2) {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
.hamburger.active span:nth-child(3) {
|
|
transform: translateY(-9px) rotate(-45deg);
|
|
}
|
|
|
|
/* 移动端菜单滑入动效 */
|
|
#mobile-menu {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.3s ease;
|
|
}
|
|
|
|
#mobile-menu.menu-open {
|
|
max-height: calc(100vh - 80px);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 菜单项依次出现动效 */
|
|
.mobile-menu-item {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#mobile-menu.menu-open .mobile-menu-item {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(6) { transition-delay: 0.3s; }
|
|
#mobile-menu.menu-open .mobile-menu-item:nth-child(7) { transition-delay: 0.35s; }
|
|
|
|
/* 下拉子菜单展开动效 */
|
|
.mobile-dropdown-menu {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 0.25s ease,
|
|
padding 0.3s ease;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.mobile-dropdown-menu.submenu-open {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
}
|
|
|
|
/* 菜单项hover效果 */
|
|
.mobile-menu-link {
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.mobile-menu-link:hover,
|
|
.mobile-menu-link:active {
|
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
|
|
border-left-color: #3b82f6;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* 下拉箭头旋转动效 */
|
|
.mobile-dropdown-toggle i {
|
|
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
.mobile-dropdown-toggle.toggle-active i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* 菜单图标装饰 */
|
|
.menu-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 12px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu-link:hover .menu-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 移动菜单遮罩层 - 只遮挡header以下的内容 */
|
|
.mobile-menu-overlay {
|
|
position: fixed;
|
|
top: 80px; /* 从header下方开始，不覆盖header */
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
z-index: 35;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 确保汉堡按钮始终在最上层 */
|
|
#mobile-menu-button {
|
|
position: relative;
|
|
z-index: 60;
|
|
}
|
|
|
|
.mobile-menu-overlay.overlay-visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* 确保移动端菜单在遮罩层上方 */
|
|
#mobile-menu {
|
|
position: relative;
|
|
z-index: 45;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-inter bg-slate-50 text-slate-700 min-h-screen flex flex-col">
|
|
<!-- 导航栏（页眉） -->
|
|
<header id="navbar"
|
|
class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/70 backdrop-blur-sm shadow-md">
|
|
<!-- 去除max-w限制和特殊padding，使其与页脚对齐并让logo和菜单分开更远 -->
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<!-- Logo -->
|
|
<div class="flex items-center space-x-2">
|
|
<!-- 替换为图片logo，您需要将logo图片放在网站目录下并修改下面的路径 -->
|
|
<a href="https://www.beiyuxing.live/" class="flex items-center">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/10/20251021-101134.png" alt="隼瞻科技"
|
|
class="h-12 w-36 object-contain">
|
|
<!-- 如果您只想显示图片，不显示文字，可以删除下面这行 -->
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 桌面导航菜单 -->
|
|
<nav class="hidden tablet:flex items-center space-x-8">
|
|
<!-- 首页 -->
|
|
<div class="relative group">
|
|
<a href="https://www.beiyuxing.live/"
|
|
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">首页</a>
|
|
</div>
|
|
|
|
<!-- 产品中心 -->
|
|
<div class="relative group nav-mega-menu">
|
|
<a
|
|
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors flex items-center cursor-pointer">
|
|
产品中心
|
|
<i
|
|
class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
|
</a>
|
|
<!-- 全宽度下拉菜单 -->
|
|
<div
|
|
class="mega-dropdown fixed left-0 right-0 mt-0 bg-white shadow-md/95 backdrop-blur-md shadow-2xl overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-y-95 group-hover:scale-y-100 z-50 border-t border-b border-slate-200">
|
|
<div class="container mx-auto px-8 py-8 max-w-7xl">
|
|
<div class="grid grid-cols-3 gap-6 max-w-4xl mx-auto">
|
|
<!-- RISC-V处理器IP带三级菜单 -->
|
|
<div class="relative dropdown-submenu col-span-1">
|
|
<a
|
|
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item cursor-pointer border border-slate-200/50 hover:border-gray-600">
|
|
<div
|
|
class="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
|
<i
|
|
class="fa fa-microchip text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">RISC-V处理器IP</span>
|
|
<i
|
|
class="fa fa-chevron-right mt-2 text-xs text-slate-400 group-hover/item:text-slate-900 transition-colors"></i>
|
|
</a>
|
|
<!-- 三级菜单 - 三列布局 -->
|
|
<div
|
|
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-white shadow-md rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-[420px] border border-slate-200">
|
|
<div class="grid grid-cols-3 gap-1 p-4">
|
|
<!-- 通用处理器IP -->
|
|
<div class="p-2">
|
|
<div
|
|
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
|
通用处理器IP</div>
|
|
<a href="https://www.beiyuxing.live/wing-m050/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M050</a>
|
|
<a href="https://www.beiyuxing.live/wing-m130/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130</a>
|
|
<a href="https://www.beiyuxing.live/wing-m510/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M510</a>
|
|
<a href="https://www.beiyuxing.live/wing-a500/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-A500</a>
|
|
|
|
</div>
|
|
<!-- 车规处理器IP -->
|
|
<div class="p-2">
|
|
<div
|
|
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
|
车规处理器IP</div>
|
|
|
|
<a href="https://www.beiyuxing.live/wing-m130a/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130A</a>
|
|
|
|
</div>
|
|
<!-- 安全处理器IP -->
|
|
<div class="p-2">
|
|
<div
|
|
class="px-3 py-2 text-xs font-semibold text-primary border-b border-primary/20 mb-2">
|
|
安全处理器IP</div>
|
|
<a href="https://www.beiyuxing.live/wing-m050s/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M050S</a>
|
|
<a href="https://www.beiyuxing.live/wing-m130s/"
|
|
class="block py-2 px-3 text-xs text-slate-600 hover:bg-slate-200 hover:text-slate-900 rounded transition-colors">Wing-M130S</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ArchitStudio开发平台 -->
|
|
<a href="https://www.beiyuxing.live/architstudio-2/"
|
|
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
|
<div
|
|
class="w-14 h-14 rounded-xl bg-gradient-to-br from-green-500/20 to-teal-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
|
<i
|
|
class="fa fa-desktop text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">ArchitStudio开发平台</span>
|
|
</a>
|
|
<!-- 智翼端侧AI解决方案 -->
|
|
<a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
|
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
|
<div
|
|
class="w-14 h-14 rounded-xl bg-gradient-to-br from-orange-500/20 to-red-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
|
<i
|
|
class="fa fa-lightbulb-o text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">智翼端侧AI解决方案</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 技术中心 -->
|
|
<div class="relative group nav-mega-menu">
|
|
<a
|
|
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors flex items-center cursor-pointer">
|
|
技术中心
|
|
<i
|
|
class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180 duration-300"></i>
|
|
</a>
|
|
<!-- 全宽度下拉菜单 -->
|
|
<div
|
|
class="mega-dropdown fixed left-0 right-0 mt-0 bg-white shadow-md/95 backdrop-blur-md shadow-2xl overflow-visible opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-y-95 group-hover:scale-y-100 z-50 border-t border-b border-slate-200">
|
|
<div class="container mx-auto px-8 py-8 max-w-7xl">
|
|
<div class="grid grid-cols-3 gap-6 max-w-3xl mx-auto">
|
|
<!-- IP相关技术带三级菜单 -->
|
|
<div class="relative dropdown-submenu">
|
|
<a
|
|
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item cursor-pointer border border-slate-200/50 hover:border-gray-600">
|
|
<div
|
|
class="w-14 h-14 rounded-xl bg-gradient-to-br from-indigo-500/20 to-blue-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
|
<i
|
|
class="fa fa-cogs text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">IP相关技术</span>
|
|
<i
|
|
class="fa fa-chevron-right mt-2 text-xs text-slate-400 group-hover/item:text-slate-900 transition-colors"></i>
|
|
</a>
|
|
<!-- 三级菜单 -->
|
|
<div
|
|
class="submenu submenu-level-3 absolute left-full top-0 ml-2 bg-white shadow-md rounded-xl shadow-2xl overflow-hidden opacity-0 invisible transition-all duration-300 w-56 border border-slate-200">
|
|
<a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
|
class="flex items-center px-5 py-4 text-sm text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-compress mr-3 text-slate-500"></i>
|
|
代码压缩技术
|
|
</a>
|
|
<a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
|
class="flex items-center px-5 py-4 text-sm text-slate-600 hover:bg-slate-200 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-bolt mr-3 text-slate-500"></i>
|
|
中断实时性技术
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- AI融合技术 -->
|
|
<a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/"
|
|
class="mega-menu-item flex flex-col items-center justify-center p-6 rounded-xl bg-slate-100/50 hover:bg-slate-200/50 transition-all duration-300 text-center group/item border border-slate-200/50 hover:border-gray-600">
|
|
<div
|
|
class="w-14 h-14 rounded-xl bg-gradient-to-br from-yellow-500/20 to-orange-500/20 flex items-center justify-center mb-4 group-hover/item:scale-110 transition-transform">
|
|
<i
|
|
class="fa fa-magic text-2xl text-slate-600 group-hover/item:text-slate-900"></i>
|
|
</div>
|
|
<span
|
|
class="text-sm font-medium text-slate-600 group-hover/item:text-slate-900">AI融合技术</span>
|
|
</a>
|
|
<!-- 占位 - 保持对称 -->
|
|
<div class="hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新闻中心 -->
|
|
<div class="relative group">
|
|
<a href="https://www.beiyuxing.live/news/"
|
|
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">新闻中心</a>
|
|
</div>
|
|
|
|
<!-- 关于我们 -->
|
|
<div class="relative group">
|
|
<a href="https://www.beiyuxing.live/about/"
|
|
class="py-2 px-1 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">关于我们</a>
|
|
</div>
|
|
|
|
<!-- 加入按钮 -->
|
|
<a href="https://www.beiyuxing.live/position/"
|
|
class="ml-4 px-4 py-2 bg-primary text-white rounded-md text-sm font-medium hover:bg-white hover:text-dark transition-colors">加入我们</a>
|
|
</nav>
|
|
|
|
<!-- 移动端菜单按钮 -->
|
|
<div class="tablet:hidden">
|
|
<button id="mobile-menu-button" type="button"
|
|
class="text-slate-600 hover:text-slate-900 transition-colors focus:outline-none p-2">
|
|
<div class="hamburger" id="hamburger-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 移动端遮罩层 -->
|
|
<div id="mobile-menu-overlay" class="mobile-menu-overlay tablet:hidden"></div>
|
|
|
|
<!-- 移动端导航菜单 -->
|
|
<div id="mobile-menu"
|
|
class="tablet:hidden bg-gradient-to-b from-white to-slate-50 border-t border-slate-200/50">
|
|
<div class="container mx-auto px-4 py-4 space-y-1">
|
|
<!-- 首页 -->
|
|
<a href="https://www.beiyuxing.live/"
|
|
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
|
<div class="menu-icon bg-blue-500/20">
|
|
<i class="fa fa-home text-blue-400"></i>
|
|
</div>
|
|
首页
|
|
</a>
|
|
|
|
<!-- 产品中心移动端菜单 -->
|
|
<div class="mobile-dropdown mobile-menu-item">
|
|
<div
|
|
class="mobile-menu-link flex items-center justify-between py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
|
<div class="flex items-center flex-1">
|
|
<div class="menu-icon bg-green-500/20">
|
|
<i class="fa fa-cubes text-green-400"></i>
|
|
</div>
|
|
<span>产品中心</span>
|
|
</div>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-6 space-y-1 ml-4 border-l border-slate-200/50">
|
|
<!-- RISC-V处理器IP二级菜单 -->
|
|
<div class="mobile-dropdown">
|
|
<div
|
|
class="flex items-center justify-between py-2.5 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-microchip text-primary mr-3 text-xs"></i>
|
|
<span>RISC-V处理器IP</span>
|
|
</div>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-3 border-l border-slate-200/30">
|
|
<!-- 通用处理器IP -->
|
|
<div class="mobile-dropdown">
|
|
<div
|
|
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
|
<span>通用处理器IP</span>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
|
<a href="https://www.beiyuxing.live/wing-m050/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M050</a>
|
|
<a href="https://www.beiyuxing.live/wing-m130/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130</a>
|
|
<a href="https://www.beiyuxing.live/wing-m510/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M510</a>
|
|
<a href="https://www.beiyuxing.live/wing-a500/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-A500</a>
|
|
</div>
|
|
</div>
|
|
<!-- 车规处理器IP -->
|
|
<div class="mobile-dropdown">
|
|
<div
|
|
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
|
<span>车规处理器IP</span>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
|
|
|
<a href="https://www.beiyuxing.live/wing-m130a/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130A</a>
|
|
</div>
|
|
</div>
|
|
<!-- 安全处理器IP -->
|
|
<div class="mobile-dropdown">
|
|
<div
|
|
class="flex items-center justify-between py-2 px-3 text-sm text-slate-500 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
|
<span>安全处理器IP</span>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-5 h-5 flex items-center justify-center rounded bg-slate-100 text-slate-400 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-2">
|
|
<a href="https://www.beiyuxing.live/wing-m050s/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M050S</a>
|
|
<a href="https://www.beiyuxing.live/wing-m130s/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">Wing-M130S</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="https://www.beiyuxing.live/architstudio-2/"
|
|
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
|
<i class="fa fa-desktop text-green-400 mr-3 text-xs"></i>
|
|
ArchitStudio开发平台
|
|
</a>
|
|
<a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
|
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
|
<i class="fa fa-lightbulb-o text-orange-400 mr-3 text-xs"></i>
|
|
智翼端侧AI解决方案
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 技术中心移动端菜单 -->
|
|
<div class="mobile-dropdown mobile-menu-item">
|
|
<div
|
|
class="mobile-menu-link flex items-center justify-between py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
|
<div class="flex items-center flex-1">
|
|
<div class="menu-icon bg-purple-500/20">
|
|
<i class="fa fa-cogs text-purple-400"></i>
|
|
</div>
|
|
<span>技术中心</span>
|
|
</div>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-6 space-y-1 ml-4 border-l border-slate-200/50">
|
|
<!-- IP相关技术二级菜单 -->
|
|
<div class="mobile-dropdown">
|
|
<div
|
|
class="flex items-center justify-between py-2.5 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg hover:bg-slate-100 transition-all">
|
|
<div class="flex items-center">
|
|
<i class="fa fa-puzzle-piece text-indigo-400 mr-3 text-xs"></i>
|
|
<span>IP相关技术</span>
|
|
</div>
|
|
<button type="button"
|
|
class="mobile-dropdown-toggle w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-900 focus:outline-none transition-all"
|
|
aria-label="展开菜单">
|
|
<i class="fa fa-chevron-down text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mobile-dropdown-menu pl-4 space-y-0.5 ml-3 border-l border-slate-200/30">
|
|
<a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">代码压缩技术</a>
|
|
<a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
|
class="block py-2 px-3 text-sm text-slate-500 hover:text-slate-900 hover:bg-primary/10 rounded-lg transition-all">中断实时性技术</a>
|
|
</div>
|
|
</div>
|
|
<a href="https://www.beiyuxing.live/ai%e8%9e%8d%e5%90%88%e6%8a%80%e6%9c%af/"
|
|
class="flex items-center py-2.5 px-3 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-all">
|
|
<i class="fa fa-magic text-yellow-400 mr-3 text-xs"></i>
|
|
AI融合技术
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 新闻中心 -->
|
|
<a href="https://www.beiyuxing.live/news/"
|
|
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
|
<div class="menu-icon bg-orange-500/20">
|
|
<i class="fa fa-newspaper-o text-orange-400"></i>
|
|
</div>
|
|
新闻中心
|
|
</a>
|
|
|
|
<!-- 关于我们 -->
|
|
<a href="https://www.beiyuxing.live/about/"
|
|
class="mobile-menu-item mobile-menu-link flex items-center py-3 px-3 text-sm font-medium text-slate-600 hover:text-slate-900 rounded-lg">
|
|
<div class="menu-icon bg-cyan-500/20">
|
|
<i class="fa fa-info-circle text-cyan-400"></i>
|
|
</div>
|
|
关于我们
|
|
</a>
|
|
|
|
<!-- 加入我们 -->
|
|
<div class="mobile-menu-item pt-4 mt-2 border-t border-slate-200/50">
|
|
<a href="https://www.beiyuxing.live/position/"
|
|
class="flex items-center justify-center py-3 px-4 text-sm font-semibold text-slate-900 bg-gradient-to-r from-primary to-blue-600 rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 hover:scale-[1.02]">
|
|
<i class="fa fa-user-plus mr-2"></i>
|
|
加入我们
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 联系我们部分已移除 -->
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-slate-50 text-slate-900 py-16 border-t border-slate-300">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
|
<!-- 公司信息 -->
|
|
<div>
|
|
<div class="flex items-center space-x-2 mb-6">
|
|
<!-- 可自定义的公司logo图片 -->
|
|
<div class="w-32 h-10 rounded-lg flex items-center justify-center overflow-hidden">
|
|
<img src="https://www.beiyuxing.live/wp-content/uploads/2025/10/20251021-101134.png"
|
|
alt="公司Logo" class="w-full h-full object-contain" />
|
|
</div>
|
|
</div>
|
|
<p class="text-slate-500 mb-6">
|
|
隼瞻科技是一家专注于提供专用处理器IP和EDA设计平台的创新型高科技公司，致力于为客户提供高性能、低功耗的处理器IP和先进的EDA设计工具。
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-weixin"></i>
|
|
</a>
|
|
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-weibo"></i>
|
|
</a>
|
|
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-linkedin"></i>
|
|
</a>
|
|
<a href="#" class="text-slate-500 hover:text-slate-900 transition-colors">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 产品 -->
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-6">产品</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="https://www.beiyuxing.live/architstudio-2/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">ArchitStudio开发平台</a></li>
|
|
<li><a href="https://www.beiyuxing.live/%e6%99%ba%e7%bf%bc%e7%ab%af%e4%be%a7ai%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">智翼端侧AI解决方案</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 服务 -->
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-6">技术</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="https://www.beiyuxing.live/elementor-%e9%a1%b5%e9%9d%a2-1447/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">AI融合技术</a></li>
|
|
<li><a href="https://www.beiyuxing.live/%e4%bb%a3%e7%a0%81%e5%8e%8b%e7%bc%a9%e6%8a%80%e6%9c%af/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">代码压缩技术</a></li>
|
|
<li><a href="https://www.beiyuxing.live/%e4%b8%ad%e6%96%ad%e5%ae%9e%e6%97%b6%e6%80%a7%e6%8a%80%e6%9c%af/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">中断实时性技术</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 关于我们 -->
|
|
<div>
|
|
<h3 class="text-lg font-bold mb-6">关于我们</h3>
|
|
<ul class="space-y-3">
|
|
<li><a href="https://www.beiyuxing.live/about/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">公司简介</a></li>
|
|
<li><a href="https://www.beiyuxing.live/position/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">加入我们</a></li>
|
|
<li><a href="https://www.beiyuxing.live/news/"
|
|
class="text-slate-500 hover:text-slate-900 transition-colors">新闻动态</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-8 border-t border-slate-300 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-slate-400 text-sm mb-4 md:mb-0">
|
|
© <span id="current-year">2023</span> 隼瞻科技. 保留所有权利.
|
|
</p>
|
|
<div class="flex space-x-6">
|
|
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">隐私政策</a>
|
|
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">使用条款</a>
|
|
<a href="#" class="text-slate-400 hover:text-slate-500 text-sm transition-colors">法律声明</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 返回顶部按钮 -->
|
|
<button id="back-to-top"
|
|
class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-darkerBg">
|
|
<i class="fa fa-arrow-up"></i>
|
|
</button>
|
|
|
|
<!-- JavaScript - 改进版 -->
|
|
<script>
|
|
// 等待DOM加载完成
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
'use strict';
|
|
|
|
// 获取元素
|
|
const navbar = document.getElementById('navbar');
|
|
const navbarContainer = navbar ? navbar.querySelector('.container') : null;
|
|
const backToTop = document.getElementById('back-to-top');
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
|
|
const hamburgerIcon = document.getElementById('hamburger-icon');
|
|
|
|
// 导航栏滚动效果
|
|
if (navbar && navbarContainer) {
|
|
window.addEventListener('scroll', function () {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('py-2', 'shadow-md');
|
|
navbar.classList.remove('py-4');
|
|
if (backToTop) {
|
|
backToTop.classList.remove('opacity-0', 'invisible');
|
|
backToTop.classList.add('opacity-100', 'visible');
|
|
}
|
|
} else {
|
|
navbar.classList.add('py-4');
|
|
navbar.classList.remove('py-2', 'shadow-md');
|
|
if (backToTop) {
|
|
backToTop.classList.add('opacity-0', 'invisible');
|
|
backToTop.classList.remove('opacity-100', 'visible');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 切换菜单的函数
|
|
function toggleMobileMenu() {
|
|
if (!mobileMenu) return;
|
|
|
|
const isOpen = mobileMenu.classList.contains('menu-open');
|
|
|
|
if (isOpen) {
|
|
closeMobileMenu();
|
|
} else {
|
|
openMobileMenu();
|
|
}
|
|
}
|
|
|
|
// 打开菜单
|
|
function openMobileMenu() {
|
|
if (!mobileMenu) return;
|
|
mobileMenu.classList.add('menu-open');
|
|
if (hamburgerIcon) hamburgerIcon.classList.add('active');
|
|
if (mobileMenuOverlay) mobileMenuOverlay.classList.add('overlay-visible');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// 关闭菜单
|
|
function closeMobileMenu() {
|
|
if (!mobileMenu) return;
|
|
mobileMenu.classList.remove('menu-open');
|
|
if (hamburgerIcon) hamburgerIcon.classList.remove('active');
|
|
if (mobileMenuOverlay) mobileMenuOverlay.classList.remove('overlay-visible');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// 汉堡按钮点击事件
|
|
if (mobileMenuButton) {
|
|
mobileMenuButton.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleMobileMenu();
|
|
});
|
|
}
|
|
|
|
// 点击遮罩层关闭菜单
|
|
if (mobileMenuOverlay) {
|
|
mobileMenuOverlay.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
closeMobileMenu();
|
|
});
|
|
}
|
|
|
|
// 点击页面任意位置关闭菜单（点击菜单外区域）
|
|
document.addEventListener('click', function (e) {
|
|
if (!mobileMenu || !mobileMenu.classList.contains('menu-open')) return;
|
|
|
|
// 检查点击是否在菜单内部或汉堡按钮上
|
|
const isClickInsideMenu = mobileMenu.contains(e.target);
|
|
const isClickOnButton = mobileMenuButton && mobileMenuButton.contains(e.target);
|
|
|
|
// 如果点击在菜单外且不是汉堡按钮，则关闭菜单
|
|
if (!isClickInsideMenu && !isClickOnButton) {
|
|
closeMobileMenu();
|
|
}
|
|
});
|
|
|
|
// 移动端下拉菜单 - 使用事件委托
|
|
if (mobileMenu) {
|
|
mobileMenu.addEventListener('click', function (e) {
|
|
// 检查是否点击了链接（直接跳转的菜单项）
|
|
const link = e.target.closest('a');
|
|
if (link && link.getAttribute('href') && link.getAttribute('href') !== '#') {
|
|
// 如果是有效链接，允许默认行为
|
|
return;
|
|
}
|
|
|
|
// 查找最近的包含下拉菜单的容器
|
|
let clickTarget = e.target.closest('.mobile-dropdown');
|
|
if (!clickTarget) return;
|
|
|
|
// 确保不是点击子菜单内的内容
|
|
const clickedSubMenu = e.target.closest('.mobile-dropdown-menu');
|
|
if (clickedSubMenu && clickedSubMenu.parentElement === clickTarget) {
|
|
// 如果点击的是子菜单内容，不处理
|
|
return;
|
|
}
|
|
|
|
// 查找直接的下拉菜单和切换按钮
|
|
const menu = clickTarget.querySelector(':scope > .mobile-dropdown-menu');
|
|
const toggleBtn = clickTarget.querySelector(':scope > .mobile-menu-link > .mobile-dropdown-toggle, :scope > div > .mobile-dropdown-toggle');
|
|
|
|
if (menu) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
menu.classList.toggle('submenu-open');
|
|
if (toggleBtn) {
|
|
toggleBtn.classList.toggle('toggle-active');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 返回顶部按钮
|
|
if (backToTop) {
|
|
backToTop.addEventListener('click', function () {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
}
|
|
|
|
// 设置当前年份
|
|
const currentYear = document.getElementById('current-year');
|
|
if (currentYear) {
|
|
currentYear.textContent = new Date().getFullYear();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |