feat: 商品详情页面交互

2025-08-02 17:35:57 +08:00
parent 9d6abe3e2a
commit ea5841d594
28 changed files with 1967 additions and 268 deletions
--- a/components/TopNavBar/styles/index.scss
+++ b/components/TopNavBar/styles/index.scss
@@ -0,0 +1,108 @@
+// TopNavBar 组件样式
+.top-nav-bar {
+  width: 100%;
+  background-color: #ffffff;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+  }
+
+  .nav-bar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    position: relative;
+
+    .nav-bar-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+      cursor: pointer;
+      transition: opacity 0.2s ease;
+
+      &:hover {
+        opacity: 0.7;
+      }
+
+      &:active {
+        opacity: 0.5;
+      }
+    }
+
+    .nav-bar-center {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 20px; // 为左右按钮留出空间
+
+      // 居中对齐（默认）
+      &--center {
+        justify-content: center;
+
+        .nav-bar-title {
+          text-align: center;
+        }
+      }
+
+      // 左对齐
+      &--left {
+        justify-content: flex-start;
+        padding-left: 20px; // 为返回按钮留出更多空间
+
+        .nav-bar-title {
+          text-align: left;
+        }
+      }
+
+      .nav-bar-title {
+        font-size: 18px;
+        font-weight: 500;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.4;
+      }
+    }
+
+    .nav-bar-right {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 30px;
+      height: 30px;
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 2;
+    }
+  }
+}
+
+// 固定导航栏时的页面内容适配
+.page-with-fixed-navbar {
+  padding-top: calc(var(--status-bar-height, 44px) + 44px);
+}
+
+// 安全区域适配
+.top-nav-bar {
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}