feat(小程序): 支持多设备绑定与管理

2026-04-22 17:25:31 +08:00
parent d7df6f565c
commit f21e0afcd0
8 changed files with 1078 additions and 670 deletions
--- a/banban-mini/src/pages/bind/index.scss
+++ b/banban-mini/src/pages/bind/index.scss
@@ -6,67 +6,6 @@
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
 }

-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 400px;
-  font-size: 30px;
-  color: #999999;
-}
-
-.empty-tip {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 70%;
-  font-size: 30px;
-  color: #999999;
-  padding: 0 48px;
-
-  .empty-title {
-    font-size: 36px;
-    color: #1A1A1A;
-    font-weight: 600;
-    margin-bottom: 12px;
-  }
-
-  .empty-desc {
-    font-size: 26px;
-    color: #999999;
-    margin-bottom: 48px;
-  }
-
-  .empty-input-wrap {
-    width: 100%;
-    margin-bottom: 24px;
-
-    .empty-input {
-      background: #F5F7FA;
-      border-radius: 12px;
-      padding: 24px;
-      font-size: 30px;
-      width: 100%;
-      height: 96px;
-      box-sizing: border-box;
-      text-align: center;
-    }
-  }
-
-  .empty-btn {
-    background: #FF8C42;
-    border-radius: 12px;
-    padding: 24px 64px;
-
-    .empty-btn-text {
-      color: #FFFFFF;
-      font-size: 32px;
-      font-weight: 500;
-    }
-  }
-}
-
 .icon-bg {
  width: 72px;
  height: 72px;
@@ -214,6 +153,125 @@
  }
 }

+.bind-form {
+  margin: 0 48px 48px;
+}
+
+.form-card {
+  background: #FFFFFF;
+  border-radius: 20px;
+  padding: 28px 32px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+.form-title {
+  font-size: 30px;
+  font-weight: 700;
+  color: #1A1A1A;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.field-item {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.field-label {
+  display: block;
+  font-size: 26px;
+  color: #666666;
+  margin-bottom: 12px;
+}
+
+.field-input {
+  width: 100%;
+  height: 88px;
+  background: #F7F8FA;
+  border-radius: 16px;
+  padding: 0 24px;
+  font-size: 28px;
+  color: #1A1A1A;
+  box-sizing: border-box;
+}
+
+.field-hint {
+  display: block;
+  font-size: 24px;
+  color: #999999;
+  line-height: 1.5;
+}
+
+.pending-tip {
+  margin-top: 20px;
+  padding: 20px 24px;
+  background: #FFF7E8;
+  border-radius: 16px;
+}
+
+.pending-tip-text {
+  font-size: 26px;
+  color: #D46B08;
+}
+
+.child-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.child-item {
+  padding: 14px 24px;
+  border-radius: 999px;
+  background: #F5F7FA;
+  margin-right: 16px;
+  margin-bottom: 16px;
+
+  &.selected {
+    background: #FF8C42;
+
+    .child-item-text {
+      color: #FFFFFF;
+    }
+  }
+}
+
+.child-item-text {
+  font-size: 26px;
+  color: #666666;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 96px;
+  background: #FF8C42;
+  border-radius: 16px;
+  color: #FFFFFF;
+  font-size: 32px;
+  font-weight: 600;
+  border: none;
+
+  &::after {
+    display: none;
+  }
+}
+
+.loading {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  text {
+    font-size: 32px;
+    color: #999999;
+  }
+}
+
 .bind-tips {
  margin: 0 48px;