|
|
@@ -1,73 +1,136 @@
|
|
|
+:root {
|
|
|
+ --nav-height: 72px;
|
|
|
+ --primary-bg: #0f172a; // 深蓝底色
|
|
|
+ --glass-bg: rgba(15, 23, 42, 0.85);
|
|
|
+ --accent-color: #3b82f6; // 科技蓝
|
|
|
+ --accent-glow: 0 0 10px rgba(59, 130, 246, 0.7);
|
|
|
+ --text-primary: #e2e8f0;
|
|
|
+ --text-secondary: #94a3b8;
|
|
|
+ --transition-speed: 0.25s;
|
|
|
+}
|
|
|
|
|
|
- /* 移动导航栏样式 */
|
|
|
- .nav-mobile-tabs {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: var(--nav-height);
|
|
|
- background: rgba(15, 23, 42, 0.95);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- border-top: 1px solid var(--glass-border);
|
|
|
- z-index: 1000;
|
|
|
- box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
- color: #94a3b8;
|
|
|
- text-decoration: none;
|
|
|
- font-size: 12px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab i {
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 4px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab.active {
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab.active i {
|
|
|
- color: var(--accent);
|
|
|
- transform: translateY(-5px);
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 0;
|
|
|
- height: 3px;
|
|
|
- background: var(--accent);
|
|
|
- border-radius: 3px 3px 0 0;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab.active::after {
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab:hover {
|
|
|
- color: white;
|
|
|
- background: rgba(255, 255, 255, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab:active {
|
|
|
- transform: scale(0.95);
|
|
|
- }
|
|
|
-
|
|
|
+/* 科技感导航栏 */
|
|
|
+.tech-nav {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: var(--nav-height);
|
|
|
+ background: var(--glass-bg);
|
|
|
+ backdrop-filter: blur(12px) saturate(180%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
+ z-index: 1000;
|
|
|
+ box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.3);
|
|
|
+ padding: 0 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ text-decoration: none;
|
|
|
+ position: relative;
|
|
|
+ transition: all var(--transition-speed) ease;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: var(--accent-color);
|
|
|
+ border-radius: 50%;
|
|
|
+ opacity: 0;
|
|
|
+ transition: all var(--transition-speed) ease;
|
|
|
+ filter: blur(8px);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.nav-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ transition: all var(--transition-speed) ease;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+.nav-label {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all var(--transition-speed) ease;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 活动状态样式 */
|
|
|
+.nav-item.active {
|
|
|
+ color: var(--text-primary);
|
|
|
+
|
|
|
+ .nav-icon {
|
|
|
+ background: rgba(59, 130, 246, 0.2);
|
|
|
+ box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
|
|
|
+ transform: translateY(-6px);
|
|
|
+
|
|
|
+ i {
|
|
|
+ color: var(--accent-color);
|
|
|
+ text-shadow: var(--accent-glow);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-label {
|
|
|
+ transform: translateY(4px);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ opacity: 0.3;
|
|
|
+ top: -20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 导航指示器 */
|
|
|
+.nav-indicator {
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
+ left: 0;
|
|
|
+ height: 4px;
|
|
|
+ background: var(--accent-color);
|
|
|
+ border-radius: 2px;
|
|
|
+ transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
+ box-shadow: var(--accent-glow);
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+/* 悬停效果 */
|
|
|
+@media (hover: hover) {
|
|
|
+ .nav-item:hover:not(.active) {
|
|
|
+ color: var(--text-primary);
|
|
|
+
|
|
|
+ .nav-icon {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 点击反馈 */
|
|
|
+.nav-item:active {
|
|
|
+ transform: scale(0.96);
|
|
|
+}
|
0235711