add banbanmini

2026-03-24 13:15:03 +08:00
parent 42567b7605
commit 0d0f995dc2
59 changed files with 26319 additions and 0 deletions
--- a/banban-mini/src/pages/bind/index.scss
+++ b/banban-mini/src/pages/bind/index.scss
@@ -0,0 +1,195 @@
+.bind-page {
+  min-height: 100%;
+  background: #F5F7FA;
+  padding-bottom: 120px;
+  padding-bottom: calc(120px + constant(safe-area-inset-bottom));
+  padding-bottom: calc(120px + env(safe-area-inset-bottom));
+}
+
+.icon-bg {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+
+  &.orange {
+    background: #FFF0E6;
+  }
+
+  .control-icon-img {
+    width: 36px;
+    height: 36px;
+  }
+}
+
+.bind-header {
+  padding: 80px 32px 32px;
+  text-align: center;
+
+  .title {
+    font-size: 44px;
+    font-weight: 700;
+    color: #1A1A1A;
+    display: block;
+    margin-bottom: 12px;
+  }
+
+  .subtitle {
+    font-size: 28px;
+    color: #666666;
+  }
+}
+
+.scan-area {
+  margin: 0 48px 48px;
+  position: relative;
+}
+
+.scan-frame {
+  background: #FFFFFF;
+  border-radius: 24px;
+  padding: 60px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+
+  &:active {
+    opacity: 0.9;
+  }
+
+  .scan-text {
+    font-size: 36px;
+    font-weight: 600;
+    color: #FF8C42;
+    margin-bottom: 12px;
+  }
+
+  .scan-hint {
+    font-size: 26px;
+    color: #999999;
+  }
+}
+
+.scan-corners {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+
+  .corner {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    border-color: #FF8C42;
+    border-style: solid;
+
+    &.top-left {
+      top: -4px;
+      left: -4px;
+      border-width: 6px 0 0 6px;
+      border-radius: 24px 0 0 0;
+    }
+
+    &.top-right {
+      top: -4px;
+      right: -4px;
+      border-width: 6px 6px 0 0;
+      border-radius: 0 24px 0 0;
+    }
+
+    &.bottom-left {
+      bottom: -4px;
+      left: -4px;
+      border-width: 0 0 6px 6px;
+      border-radius: 0 0 0 24px;
+    }
+
+    &.bottom-right {
+      bottom: -4px;
+      right: -4px;
+      border-width: 0 6px 6px 0;
+      border-radius: 0 0 24px 0;
+    }
+  }
+}
+
+.bind-options {
+  margin: 0 48px 48px;
+
+  .option-item {
+    background: #FFFFFF;
+    border-radius: 20px;
+    padding: 28px 32px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+
+    &:active {
+      opacity: 0.8;
+    }
+
+    .option-icon {
+      font-size: 36px;
+      margin-right: 20px;
+    }
+
+    .option-text {
+      flex: 1;
+      font-size: 30px;
+      color: #1A1A1A;
+      font-weight: 500;
+    }
+
+    .option-arrow {
+      font-size: 32px;
+      color: #CCCCCC;
+    }
+  }
+}
+
+.bind-tips {
+  margin: 0 48px;
+
+  .tips-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: #1A1A1A;
+    margin-bottom: 24px;
+    display: block;
+  }
+
+  .tip-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20px;
+
+    .tip-number {
+      width: 44px;
+      height: 44px;
+      background: #FF8C42;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      color: #FFFFFF;
+      font-weight: 600;
+      margin-right: 16px;
+      flex-shrink: 0;
+    }
+
+    .tip-text {
+      flex: 1;
+      font-size: 28px;
+      color: #666666;
+      line-height: 1.5;
+      padding-top: 6px;
+    }
+  }
+}