feat(ProviderNav): update mobile layout to use bottom floating navigation and improve scroll handling

2026-02-18 10:40:50 +08:00 · 2026-02-01 02:24:05 +08:00
parent 237cca5680
commit f8c4a434ed
3 changed files with 88 additions and 19 deletions
--- a/src/components/providers/ProviderNav/ProviderNav.module.scss
+++ b/src/components/providers/ProviderNav/ProviderNav.module.scss
@@ -75,9 +75,39 @@
  }
 }

-// 小屏幕隐藏悬浮导航
+// 小屏幕改为底部横向浮层
@media (max-width: 1200px) {
  .navContainer {
-    display: none;
+    top: auto;
+    right: auto;
+    left: 50%;
+    bottom: calc(12px + env(safe-area-inset-bottom));
+    transform: translateX(-50%);
+    width: min(520px, calc(100vw - 24px));
+  }
+
+  .navList {
+    flex-direction: row;
+    gap: 6px;
+    padding: 8px 10px;
+    border-radius: 999px;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .navItem {
+    width: 36px;
+    height: 36px;
+    border-radius: 999px;
+    flex: 0 0 auto;
+  }
+
+  .icon {
+    width: 22px;
+    height: 22px;
  }
 }