79 lines
2.1 KiB
Plaintext
79 lines
2.1 KiB
Plaintext
---
|
|
const pathname = Astro.url.pathname;
|
|
|
|
const navItems = [
|
|
{ href: '/', label: '首页' },
|
|
{ href: '/product', label: '产品' },
|
|
{ href: '/philosophy', label: '理念' },
|
|
];
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/') {
|
|
return pathname === '/';
|
|
}
|
|
return pathname.startsWith(href);
|
|
};
|
|
---
|
|
|
|
<header style="position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 8px 32px 0 rgba(18, 26, 43, 0.03);">
|
|
<nav style="display: flex; justify-content: space-between; align-items: center; height: 64px; padding-left: 24px; padding-right: 24px; max-width: 1280px; margin: 0 auto;">
|
|
<a href="/" style="display: flex; align-items: center; gap: 8px;">
|
|
<img src="/logo.png" alt="知习 AI" style="height: 32px; width: auto;" />
|
|
<span style="color: #4F7CFF; font-size: 20px; font-weight: 800; letter-spacing: -0.02em;" class="desktop-text">知习 AI</span>
|
|
</a>
|
|
|
|
<div class="desktop-nav">
|
|
{navItems.map(item => (
|
|
<a
|
|
href={item.href}
|
|
style={{
|
|
color: isActive(item.href) ? '#4F7CFF' : '#64748b',
|
|
'border-bottom': isActive(item.href) ? '2px solid #4F7CFF' : 'none',
|
|
'padding-bottom': '4px',
|
|
transition: 'all 0.3s'
|
|
}}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<a href="/waitlist" style="color: #ffffff; font-weight: 500; padding: 8px 24px; border-radius: 9999px; background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%); transition: all 0.3s; font-size: 14px;">
|
|
立即加入
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<style>
|
|
.desktop-text {
|
|
display: none;
|
|
}
|
|
|
|
.desktop-nav {
|
|
display: none;
|
|
gap: 32px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.desktop-nav a {
|
|
color: #64748b;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.desktop-nav a:hover {
|
|
color: #4F7CFF;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.desktop-text {
|
|
display: inline;
|
|
}
|
|
|
|
.desktop-nav {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|