feat: 商品详情页面交互

2025-08-02 17:35:57 +08:00
parent 9d6abe3e2a
commit ea5841d594
28 changed files with 1967 additions and 268 deletions
--- a/pages/goods/components/GoodInfo/styles/index.scss
+++ b/pages/goods/components/GoodInfo/styles/index.scss
@@ -0,0 +1,106 @@
+.good-info {
+  background: #fff;
+  margin-bottom: 12px;
+
+  // 价格区域
+  .price-section {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin-bottom: 12px;
+
+    .price-main {
+      display: flex;
+      align-items: flex-end;
+
+      .currency {
+        font-size: 12px;
+        color: #ff6a00;
+        font-weight: 600;
+        margin-right: 2px;
+      }
+
+      .price {
+        font-size: 18px;
+        color: #ff6a00;
+        font-weight: 700;
+        line-height: 1;
+      }
+    }
+  }
+
+  // 标题区域
+  .title-section {
+    margin-bottom: 12px;
+
+    .title {
+      font-size: 16px;
+      color: #333;
+      font-weight: 600;
+      line-height: 1.4;
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .tag-wrapper {
+      display: flex;
+      align-items: center;
+
+      .time-tag {
+        color: #f55726;
+        padding: 3px 6px;
+        border-radius: 6px;
+        font-size: 9px;
+        border: 1px solid #f55726;
+      }
+    }
+  }
+
+  // 地址区域
+  .address-section {
+    margin-bottom: 12px;
+    padding: 12px 0;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+
+    .address-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      .address-text {
+        flex: 1;
+        font-size: 14px;
+        color: #333;
+        line-height: 1.4;
+      }
+    }
+  }
+
+  // 设施信息区域
+  .facilities-section {
+    .facilities-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+
+      .facility-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px;
+        background: #fafafa;
+        border-radius: 6px;
+
+        .facility-text {
+          font-size: 12px;
+          color: #333;
+          line-height: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}