fix(ui): align binding headers and unify handoff buttons

banban-mini/src/pages/bind/index.scss

@@ -1,3 +1,5 @@
+@import '../../styles/binding-controls';
+
 .bind-page {
   min-height: 100%;
   background: #F5F7FA;
@@ -28,12 +30,13 @@
 .bind-header {
   padding: 80px 32px 32px;
   position: relative;
+  box-sizing: border-box;
   text-align: center;
 
   .back-btn {
-    position: absolute;
-    left: 32px;
-    top: 80px;
+    position: static;
+    flex-shrink: 0;
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     padding: 12px 18px;
@@ -53,14 +56,6 @@
     color: #1A1A1A;
     font-weight: 500;
   }
-
-  .title {
-    font-size: 44px;
-    font-weight: 700;
-    color: #1A1A1A;
-    display: block;
-    padding: 0 120px;
-  }
 }
 
 .scan-area {
@@ -411,11 +406,7 @@
 .bind-countdown-label { margin-top: 12px; font-size: 22px; color: #aa8154; }
 .bind-instruction { padding: 28px; border: 2px solid #d2b48c; border-radius: 46px; background: #fffdf7; }
 .bind-instruction-title { font-size: 34px; font-weight: 600; color: #895731; }
-.bind-result-button { min-height: 92px; margin-top: 28px; border-radius: 46px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; box-sizing: border-box; }
-.bind-result-button::after { display: none; }
-.bind-result-button.primary { background: linear-gradient(#ffce8d, #efa05a); border: 2px solid #cf935a; color: #895731; }
-.bind-result-button.secondary { background: #fffdf7; border: 2px solid #cf935a; color: #ad8054; }
-.bind-result-button.waiting { background: linear-gradient(#eeede9, #c9c7c1); border: 2px solid #aaa69c; color: #777168; }
+.bind-result-button { @include binding-action-button; }
 .bind-device-summary { margin-top: 32px; padding: 12px 28px; border: 2px solid #d2b48c; border-radius: 28px; background: #fffdf7; text-align: left; }
 .bind-device-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; color: #a68d74; font-size: 26px; }
 .bind-device-row + .bind-device-row { border-top: 1px solid #eee3d5; }

banban-mini/src/pages/traffic-binding/index.scss

@@ -1,7 +1,9 @@
+@import '../../styles/binding-controls';
+
 .traffic-binding-page {
   min-height: 100vh; box-sizing: border-box; padding: 72rpx 40rpx;
   .title { display: block; font-size: 38rpx; font-weight: bold; margin-bottom: 30rpx; }
   .description { display: block; font-size: 28rpx; line-height: 1.7; margin-bottom: 30rpx; }
   .error { display: block; color: #a52a2a; margin-bottom: 24rpx; }
-  button { margin-top: 24rpx; }
+  .traffic-action { @include binding-action-button; }
 }

banban-mini/src/pages/traffic-binding/index.tsx

@@ -75,7 +75,7 @@ export default function TrafficBindingPage() {
     {operation?.last_error === 'TRAFFIC_UNBIND_REQUIRED' && <Text className='description'>原流量绑定仍有效，请继续前往流量管理小程序解绑。</Text>}
     {operation?.status === 'partial_failed' && <Text className='description'>上次流量操作未完成，可以继续重试。</Text>}
     {error && <Text className='error'>{error}</Text>}
-    {!completed && <Button disabled={busy} onClick={proceed}>{busy ? '处理中…' : finalUnbind ? '完成伴伴解绑' : '继续处理'}</Button>}
-    <Button disabled={busy} onClick={() => Taro.switchTab({ url: '/pages/sleep/index' })}>{completed ? '返回管理' : '稍后处理'}</Button>
+    {!completed && <Button className='traffic-action primary' disabled={busy} onClick={proceed}>{busy ? '处理中…' : finalUnbind ? '完成伴伴解绑' : '继续处理'}</Button>}
+    <Button className='traffic-action secondary' disabled={busy} onClick={() => Taro.switchTab({ url: '/pages/sleep/index' })}>{completed ? '返回管理' : '稍后处理'}</Button>
   </View>
 }

banban-mini/src/styles/_binding-controls.scss

@@ -0,0 +1,37 @@
+@mixin binding-action-button {
+  width: 100%;
+  min-height: 92px;
+  margin-top: 28px;
+  padding: 18px 28px;
+  border-radius: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--bb-body-font);
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1.5;
+  box-sizing: border-box;
+
+  &::after { display: none; }
+
+  &.primary {
+    background: linear-gradient(#ffce8d, #efa05a);
+    border: 2px solid #cf935a;
+    color: #895731;
+  }
+
+  &.secondary {
+    background: #fffdf7;
+    border: 2px solid #cf935a;
+    color: #ad8054;
+  }
+
+  &.waiting {
+    background: linear-gradient(#eeede9, #c9c7c1);
+    border: 2px solid #aaa69c;
+    color: #777168;
+  }
+
+  &[disabled] { opacity: 0.55; }
+}

banban-mini/src/styles/ui-theme.scss

@@ -63,7 +63,6 @@ textarea {
   text-align: center;
 }
 
-.bind-header .title,
 .login-header .title {
   color: var(--bb-brown) !important;
   font-family: 'MuyaoSoftbrush', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
@@ -108,11 +107,22 @@ textarea {
 }
 
 .bind-header .title {
-  font-size: 38px !important;
+  color: #895731 !important;
+  font-family: var(--bb-body-font);
+  font-size: 36px !important;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
+  min-height: 76px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10px 64px !important;
-  border: 2px solid var(--bb-border);
-  border-radius: 46% 54% 52% 48%;
-  background: rgba(255, 253, 247, 0.95);
+  border: 2px solid rgba(237, 201, 148, 0.72);
+  border-radius: 18px;
+  background: rgba(255, 253, 247, 0.96);
+  box-shadow: 0 5px 0 rgba(237, 201, 148, 0.22);
 }
 
 .bind-header .back-btn,
@@ -765,9 +775,9 @@ page { background-image: url('../assets/ui/page-pattern.png') !important; backgr
 .feature-item .feature-icon-image { width: 72px; height: 64px; padding: 6px; background: transparent; margin-bottom: 12px; }
 .feature-item .feature-text { font-size: 22px; text-align: center; }
 .login-btn-wrapper .login-btn { border-radius: 48px !important; background: linear-gradient(#e4f598, #bad83b) !important; border-color: #97ad3b !important; }
-.bind-header { display: flex; align-items: center; gap: 12px; padding: 22px 24px 32px !important; }
+.bind-header { display: flex; align-items: center; gap: 12px; padding: 22px 48px 32px !important; }
 .bind-header .back-btn { position: static; flex-shrink: 0; padding: 10px 14px; }
-.bind-header .title { flex: 1; min-width: 0; margin: 0; padding: 12px !important; font-size: 32px !important; }
+.bind-header .title { flex: 1; min-width: 0; margin: 0; padding: 12px !important; }
 .status-card { margin-top: 16px; min-height: 340px; padding: 32px !important; }
 .status-card .status-badge { margin-bottom: 24px; }
 .status-card .battery-section { max-width: 58%; }

docs/banban-mini-visual-check-20260923/README.md

@@ -0,0 +1,17 @@
+# 绑定相关页面样式复核
+
+本次统一绑定页标题字体及圆角长框，复用绑定结果页的主、次按钮样式，并修复返回按钮的绝对定位覆盖公共布局所造成的标题边框重叠。标题区左右间距与下方内容区对齐。
+
+## 截图与验证范围
+
+使用微信开发者工具 iPhone 12/13 (Pro) 模拟器，屏幕宽度 390px、高度 844px、基础库 3.17.3。截图来自实际小程序页面内容区，使用模拟登录及接口数据，不代表真机验收或真实绑定、解绑操作。
+
+- `before-bind.png`：本轮复核前，返回按钮仍压在标题框下沿。
+- `after-bind.png`：修复后的扫码绑定页面。
+- `after-traffic.png`：流量服务关联页面。
+- `after-unbind.png`：联合解绑页面。
+- `after-metrics.json`：通过小程序选择器查询取得的页面元素边界和计算样式。
+
+测量结果：返回按钮横向范围为 24–89px，标题框为 95–366px，两者不重叠；下方内容框为 24–366px，左右外缘对齐。关联和解绑页按钮横向范围为 20–370px。所检查元素均未超出 390px 页面宽度。
+
+微信小程序构建通过；现有 33 项测试通过。编译产物中的主、次、等待及禁用按钮样式已核对一致。其他屏幕尺寸及真机显示仍需进一步验证。

docs/banban-mini-visual-check-20260923/after-metrics.json

@@ -0,0 +1,311 @@
+{
+  "system": {
+    "brand": "devtools",
+    "model": "iPhone 12/13 (Pro)",
+    "system": "iOS 10.0.1",
+    "platform": "devtools",
+    "benchmarkLevel": -1,
+    "pixelRatio": 3,
+    "screenWidth": 390,
+    "screenHeight": 844,
+    "windowWidth": 390,
+    "windowHeight": 844,
+    "statusBarHeight": 47,
+    "safeArea": {
+      "top": 47,
+      "left": 0,
+      "right": 390,
+      "bottom": 810,
+      "width": 390,
+      "height": 763
+    },
+    "language": "zh_CN",
+    "version": "8.0.5",
+    "fontSizeSetting": 16,
+    "SDKVersion": "3.17.3",
+    "host": {
+      "env": "WeChat"
+    },
+    "enableDebug": false,
+    "mode": "default",
+    "deviceOrientation": "portrait",
+    "bluetoothEnabled": true,
+    "locationEnabled": true,
+    "wifiEnabled": true,
+    "albumAuthorized": true,
+    "cameraAuthorized": true,
+    "locationAuthorized": true,
+    "microphoneAuthorized": true,
+    "notificationAuthorized": true,
+    "notificationAlertAuthorized": true,
+    "notificationBadgeAuthorized": true,
+    "notificationSoundAuthorized": true,
+    "phoneCalendarAuthorized": true,
+    "bluetoothAuthorized": true,
+    "locationReducedAccuracy": true,
+    "devicePixelRatio": 3
+  },
+  "pages": {
+    "bind": [
+      {
+        "selector": ".bind-page",
+        "left": 0,
+        "right": 390,
+        "top": 0,
+        "bottom": 1142,
+        "width": 390,
+        "height": 1142,
+        "display": "block",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "103px 0px 96px"
+      },
+      {
+        "selector": ".bind-header",
+        "left": 0,
+        "right": 390,
+        "top": 103,
+        "bottom": 169,
+        "width": 390,
+        "height": 66,
+        "display": "flex",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "11px 24px 16px"
+      },
+      {
+        "selector": ".bind-header .back-btn",
+        "left": 24,
+        "right": 89,
+        "top": 117.5,
+        "bottom": 149.5,
+        "width": 65,
+        "height": 32,
+        "display": "flex",
+        "position": "static",
+        "box-sizing": "border-box",
+        "border-radius": "519px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "6px 9px"
+      },
+      {
+        "selector": ".bind-header .title",
+        "left": 95,
+        "right": 366,
+        "top": 114,
+        "bottom": 153,
+        "width": 271,
+        "height": 39,
+        "display": "flex",
+        "position": "static",
+        "box-sizing": "border-box",
+        "border-radius": "9px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "6px"
+      },
+      {
+        "selector": ".scan-area",
+        "left": 24,
+        "right": 366,
+        "top": 169,
+        "bottom": 331,
+        "width": 342,
+        "height": 162,
+        "display": "block",
+        "position": "relative",
+        "box-sizing": "content-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "0px"
+      },
+      {
+        "selector": ".scan-frame",
+        "left": 24,
+        "right": 366,
+        "top": 169,
+        "bottom": 331,
+        "width": 342,
+        "height": 162,
+        "display": "flex",
+        "position": "static",
+        "box-sizing": "content-box",
+        "border-radius": "12px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "31px 20px"
+      },
+      {
+        "selector": ".form-card",
+        "left": 24,
+        "right": 366,
+        "top": 355,
+        "bottom": 583,
+        "width": 342,
+        "height": 228,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "content-box",
+        "border-radius": "10px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "14px 16px"
+      },
+      {
+        "selector": ".field-input",
+        "left": 41,
+        "right": 349,
+        "top": 477,
+        "bottom": 522,
+        "width": 308,
+        "height": 45,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "border-box",
+        "border-radius": "8px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "0px 12px"
+      }
+    ],
+    "traffic": [
+      {
+        "selector": ".traffic-binding-page",
+        "left": 0,
+        "right": 390,
+        "top": 0,
+        "bottom": 753,
+        "width": 390,
+        "height": 753,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "border-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "37px 20px"
+      },
+      {
+        "selector": ".title",
+        "left": 20,
+        "right": 370,
+        "top": 37,
+        "bottom": 63,
+        "width": 350,
+        "height": 26,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "content-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "0px"
+      },
+      {
+        "selector": ".description",
+        "left": 20,
+        "right": 370,
+        "top": 78,
+        "bottom": 124,
+        "width": 350,
+        "height": 46,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "content-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "0px"
+      },
+      {
+        "selector": ".traffic-action.primary",
+        "left": 20,
+        "right": 370,
+        "top": 139,
+        "bottom": 186,
+        "width": 350,
+        "height": 47,
+        "display": "flex",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "23px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "9px 14px"
+      },
+      {
+        "selector": ".traffic-action.secondary",
+        "left": 20,
+        "right": 370,
+        "top": 200,
+        "bottom": 247,
+        "width": 350,
+        "height": 47,
+        "display": "flex",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "23px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "9px 14px"
+      }
+    ],
+    "unbind": [
+      {
+        "selector": ".traffic-binding-page",
+        "left": 0,
+        "right": 390,
+        "top": 0,
+        "bottom": 753,
+        "width": 390,
+        "height": 753,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "border-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "37px 20px"
+      },
+      {
+        "selector": ".title",
+        "left": 20,
+        "right": 370,
+        "top": 37,
+        "bottom": 63,
+        "width": 350,
+        "height": 26,
+        "display": "block",
+        "position": "static",
+        "box-sizing": "content-box",
+        "border-radius": "0px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "0px"
+      },
+      {
+        "selector": ".traffic-action.primary",
+        "left": 20,
+        "right": 370,
+        "top": 162,
+        "bottom": 209,
+        "width": 350,
+        "height": 47,
+        "display": "flex",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "23px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "9px 14px"
+      },
+      {
+        "selector": ".traffic-action.secondary",
+        "left": 20,
+        "right": 370,
+        "top": 223,
+        "bottom": 270,
+        "width": 350,
+        "height": 47,
+        "display": "flex",
+        "position": "relative",
+        "box-sizing": "border-box",
+        "border-radius": "23px",
+        "font-family": "-apple-system, system-ui, \"PingFang SC\", \"Microsoft YaHei\", sans-serif",
+        "padding": "9px 14px"
+      }
+    ]
+  }
+}