/* ======================================== 通用导航栏样式 - 可复用于各页面 使用方法：在页面 中引入此文件 并在 body 顶部添加 ======================================== */ /* 艺术字所需字体（在 navbar.css 中统一引入） */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap'); /* 导航栏主体 */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(90deg, #cce8ff 0%, #ddf0ff 100%); box-shadow: 0 2px 12px rgba(0, 100, 200, 0.15); display: flex; align-items: center; justify-content: center; padding: 0 24px; z-index: 1000; font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; } /* 居中按钮区 */ .nav-center { display: flex; gap: 16px; align-items: center; } /* 导航按钮（默认/未激活） */ .nav-btn { padding: 8px 28px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.55); color: #2c6fa8; font-size: 1.05rem; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; font-family: inherit; letter-spacing: 0.5px; } .nav-btn:hover { background: rgba(255, 255, 255, 0.85); color: #1a4f7a; } /* 当前激活页面按钮 */ .nav-btn.active { background: #3a8dd1; color: white; box-shadow: 0 2px 10px rgba(58, 141, 209, 0.45); } .nav-btn.active:hover { background: #2f7cbf; color: white; } /* 左侧品牌艺术字 */ .nav-brand { position: absolute; left: 28px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.15rem; font-weight: 400; letter-spacing: 0.5px; background: linear-gradient(135deg, #1a4f7a 0%, #3a8dd1 60%, #6abcf7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; user-select: none; white-space: nowrap; } /* 右侧用户信息 */ .nav-user { position: absolute; right: 28px; display: flex; align-items: center; gap: 7px; color: #2c6fa8; font-size: 0.9rem; font-weight: 500; font-family: inherit; } .nav-user i { font-size: 1.1rem; color: #3a8dd1; } /* 页面内容区域（避免被固定导航栏遮挡） */ .page-content { padding-top: 60px; min-height: 100vh; }