diff --git a/banban-mini/src/pages/bind/index.scss b/banban-mini/src/pages/bind/index.scss
index 916824b..c253f40 100644
--- a/banban-mini/src/pages/bind/index.scss
+++ b/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; }
diff --git a/banban-mini/src/pages/traffic-binding/index.scss b/banban-mini/src/pages/traffic-binding/index.scss
index 9ffee51..b7b0172 100644
--- a/banban-mini/src/pages/traffic-binding/index.scss
+++ b/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; }
}
diff --git a/banban-mini/src/pages/traffic-binding/index.tsx b/banban-mini/src/pages/traffic-binding/index.tsx
index b793ad3..e442b83 100644
--- a/banban-mini/src/pages/traffic-binding/index.tsx
+++ b/banban-mini/src/pages/traffic-binding/index.tsx
@@ -75,7 +75,7 @@ export default function TrafficBindingPage() {
{operation?.last_error === 'TRAFFIC_UNBIND_REQUIRED' && 原流量绑定仍有效,请继续前往流量管理小程序解绑。}
{operation?.status === 'partial_failed' && 上次流量操作未完成,可以继续重试。}
{error && {error}}
- {!completed && }
-
+ {!completed && }
+
}
diff --git a/banban-mini/src/styles/_binding-controls.scss b/banban-mini/src/styles/_binding-controls.scss
new file mode 100644
index 0000000..c0b7ded
--- /dev/null
+++ b/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; }
+}
diff --git a/banban-mini/src/styles/ui-theme.scss b/banban-mini/src/styles/ui-theme.scss
index 5e75e50..f968336 100644
--- a/banban-mini/src/styles/ui-theme.scss
+++ b/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%; }
diff --git a/docs/banban-mini-visual-check-20260923/README.md b/docs/banban-mini-visual-check-20260923/README.md
new file mode 100644
index 0000000..219bf05
--- /dev/null
+++ b/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 项测试通过。编译产物中的主、次、等待及禁用按钮样式已核对一致。其他屏幕尺寸及真机显示仍需进一步验证。
diff --git a/docs/banban-mini-visual-check-20260923/after-bind.png b/docs/banban-mini-visual-check-20260923/after-bind.png
new file mode 100644
index 0000000..7304d18
Binary files /dev/null and b/docs/banban-mini-visual-check-20260923/after-bind.png differ
diff --git a/docs/banban-mini-visual-check-20260923/after-metrics.json b/docs/banban-mini-visual-check-20260923/after-metrics.json
new file mode 100644
index 0000000..a59ca9f
--- /dev/null
+++ b/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"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/docs/banban-mini-visual-check-20260923/after-traffic.png b/docs/banban-mini-visual-check-20260923/after-traffic.png
new file mode 100644
index 0000000..5702bc9
Binary files /dev/null and b/docs/banban-mini-visual-check-20260923/after-traffic.png differ
diff --git a/docs/banban-mini-visual-check-20260923/after-unbind.png b/docs/banban-mini-visual-check-20260923/after-unbind.png
new file mode 100644
index 0000000..e89f3db
Binary files /dev/null and b/docs/banban-mini-visual-check-20260923/after-unbind.png differ
diff --git a/docs/banban-mini-visual-check-20260923/before-bind.png b/docs/banban-mini-visual-check-20260923/before-bind.png
new file mode 100644
index 0000000..4b88945
Binary files /dev/null and b/docs/banban-mini-visual-check-20260923/before-bind.png differ