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