feat: 商品详情支付交互调试

2025-08-06 21:43:08 +08:00
parent 5292ede3c5
commit e482ea5393
10 changed files with 673 additions and 137 deletions
--- a/pages/login/components/AgreePopup/styles/index.scss
+++ b/pages/login/components/AgreePopup/styles/index.scss
@@ -0,0 +1,95 @@
+// AgreePopup 组件样式
+.agree-popup {
+    width: 327px;
+    background: #ffffff;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+    // 弹窗头部
+    .popup-header {
+        position: relative;
+        padding: 20px 20px 0 20px;
+
+        .popup-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #333333;
+            text-align: center;
+            line-height: 24px;
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+
+            &:hover {
+                background: #f5f5f5;
+                border-radius: 50%;
+            }
+        }
+    }
+
+    // 弹窗内容
+    .popup-content {
+        padding: 20px;
+
+        .content-text {
+            margin-bottom: 16px;
+
+            .main-text {
+                font-size: 14px;
+                color: #333;
+                line-height: 22px;
+                display: block;
+            }
+        }
+
+        .notice-text {
+            text {
+                font-size: 13px;
+                color: #333;
+                line-height: 20px;
+                display: block;
+            }
+        }
+    }
+
+    // 按钮区域
+    .button-area {
+        padding: 0 20px 20px 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .confirm-btn {
+            width: 148px;
+            height: 44px;
+            background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff;
+            border-radius: 50px;
+            font-size: 16px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+
+            &:hover {
+                background: #0056cc;
+            }
+
+            &:active {
+                background: #004499;
+                transform: scale(0.98);
+            }
+        }
+    }
+}