manual save(2026-01-05 11:17)
This commit is contained in:
SiteAgent Bot
@@ -41,11 +41,16 @@ export const Header: React.FC = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 顶部信息栏 */}
|
||||
{/* 顶部信息栏 - 玻璃效果 */}
|
||||
<motion.div
|
||||
className={`fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-primary-dark to-primary text-white text-xs transition-all duration-300 ${
|
||||
className={`fixed top-0 left-0 right-0 z-50 text-white text-xs transition-all duration-300 border-b border-white/10 ${
|
||||
isScrolled ? 'h-0 opacity-0 overflow-hidden' : 'h-10'
|
||||
}`}
|
||||
style={{
|
||||
background: 'linear-gradient(to right, rgba(20, 56, 93, 0.85), rgba(33, 93, 155, 0.85))',
|
||||
backdropFilter: 'blur(12px) saturate(150%)',
|
||||
WebkitBackdropFilter: 'blur(12px) saturate(150%)',
|
||||
}}
|
||||
initial={{ y: -40 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
@@ -77,12 +82,23 @@ export const Header: React.FC = () => {
|
||||
<motion.header
|
||||
className={`fixed left-0 right-0 z-50 transition-all duration-300 ${
|
||||
isScrolled
|
||||
? 'top-0 bg-white/95 backdrop-blur-md shadow-lg'
|
||||
: 'top-10 bg-white shadow-md'
|
||||
? 'top-0 bg-white/80 backdrop-blur-xl backdrop-saturate-150 shadow-lg border-b border-white/20'
|
||||
: 'top-10 bg-white/60 backdrop-blur-lg backdrop-saturate-120 shadow-md border-b border-white/30'
|
||||
}`}
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.1 }}
|
||||
style={{
|
||||
background: isScrolled
|
||||
? 'rgba(255, 255, 255, 0.8)'
|
||||
: 'rgba(255, 255, 255, 0.6)',
|
||||
backdropFilter: isScrolled
|
||||
? 'blur(20px) saturate(150%)'
|
||||
: 'blur(16px) saturate(120%)',
|
||||
WebkitBackdropFilter: isScrolled
|
||||
? 'blur(20px) saturate(150%)'
|
||||
: 'blur(16px) saturate(120%)',
|
||||
}}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-[80px]">
|
||||
@@ -132,16 +148,7 @@ export const Header: React.FC = () => {
|
||||
aria-current={isActive(item.path) ? 'page' : undefined}
|
||||
>
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
|
||||
{/* 活动状态指示器 - 渐变下划线 */}
|
||||
{isActive(item.path) && (
|
||||
<motion.div
|
||||
layoutId="activeIndicator"
|
||||
className="absolute bottom-1 left-1/2 -translate-x-1/2 w-8 h-1 bg-gradient-to-r from-primary to-accent rounded-full"
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
{/* 悬停背景效果 */}
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-accent/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
@@ -214,7 +221,7 @@ export const Header: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 移动端菜单 - 增强版 */}
|
||||
{/* 移动端菜单 - 玻璃效果版 */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.nav
|
||||
@@ -222,7 +229,12 @@ export const Header: React.FC = () => {
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="lg:hidden bg-gradient-to-b from-white to-gray-50 border-t border-gray-100 overflow-hidden shadow-xl"
|
||||
className="lg:hidden overflow-hidden shadow-xl border-b border-white/20"
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.85)',
|
||||
backdropFilter: 'blur(20px) saturate(150%)',
|
||||
WebkitBackdropFilter: 'blur(20px) saturate(150%)',
|
||||
}}
|
||||
role="navigation"
|
||||
aria-label="移动端导航"
|
||||
>
|
||||
@@ -238,19 +250,13 @@ export const Header: React.FC = () => {
|
||||
to={item.path}
|
||||
className={`block px-5 py-3.5 rounded-xl text-base font-medium transition-all duration-200 ${
|
||||
isActive(item.path)
|
||||
? 'bg-gradient-to-r from-primary/10 to-accent/10 text-primary shadow-sm'
|
||||
: 'text-gray-700 hover:bg-primary/5 active:scale-95'
|
||||
? 'bg-gradient-to-r from-primary/15 to-accent/15 text-primary shadow-sm backdrop-blur-sm'
|
||||
: 'text-gray-700 hover:bg-white/30 active:scale-95 backdrop-blur-sm'
|
||||
}`}
|
||||
aria-current={isActive(item.path) ? 'page' : undefined}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{item.label}</span>
|
||||
{isActive(item.path) && (
|
||||
<motion.div
|
||||
className="w-2 h-2 rounded-full bg-gradient-to-r from-primary to-accent"
|
||||
layoutId="mobileActiveIndicator"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -258,21 +264,21 @@ export const Header: React.FC = () => {
|
||||
|
||||
{/* 移动端联系方式 */}
|
||||
<motion.div
|
||||
className="pt-4 mt-2 border-t border-gray-200 space-y-3"
|
||||
className="pt-4 mt-2 border-t border-white/20 space-y-3"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<a
|
||||
href="tel:400-123-4567"
|
||||
className="flex items-center gap-3 px-5 py-3 rounded-xl text-gray-700 hover:bg-primary/5 transition-all"
|
||||
className="flex items-center gap-3 px-5 py-3 rounded-xl text-gray-700 hover:bg-white/30 transition-all backdrop-blur-sm"
|
||||
>
|
||||
<Phone size={18} className="text-primary" />
|
||||
<span className="text-sm font-medium">400-123-4567</span>
|
||||
</a>
|
||||
|
||||
<motion.button
|
||||
className="w-full px-5 py-3.5 text-base font-medium text-white rounded-xl bg-gradient-to-r from-primary to-primary-light shadow-lg shadow-primary/30"
|
||||
className="w-full px-5 py-3.5 text-base font-medium text-white rounded-xl bg-gradient-to-r from-primary to-primary-light shadow-lg shadow-primary/30 backdrop-blur-sm"
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
立即咨询
|
||||
|
||||
Reference in New Issue
Block a user