diff --git a/assets/css/routes/user-center/settings.css b/assets/css/routes/user-center/settings.css index 9a4d1087..9dafdad8 100644 --- a/assets/css/routes/user-center/settings.css +++ b/assets/css/routes/user-center/settings.css @@ -716,38 +716,52 @@ .aksrt-settings-modal .code-send-btn.is-counting { pointer-events: none; opacity: .6; } .aksrt-settings-modal .aksrt-captcha-wrap { margin: 12px 0 8px; } -/* 修改手机:脱敏中间位数字框 */ +/* 修改手机:脱敏中间位数字框,与前缀/后缀号码一体呈现 */ .aksrt-settings-modal .aksrt-phone-digits { display: flex; + align-items: center; justify-content: center; - gap: 10px; - margin-bottom: 10px; + gap: 6px; + margin-bottom: 12px; +} + +.aksrt-settings-modal .aksrt-phone-digit__edge { + padding: 0 2px; + color: var(--color-ink, #333); + font-size: 22px; + font-weight: 600; + line-height: 1; + letter-spacing: 1px; + white-space: nowrap; } .aksrt-settings-modal .aksrt-phone-digit { - width: 48px; - height: 52px; + width: 44px; + height: 50px; padding: 0; - border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.12)); - border-radius: 8px; - background: transparent; + border: 1.5px solid var(--muted-3-color, #c9d1d9); + border-radius: 10px; + background-color: var(--main-bg-color, #f7f8fa); color: var(--color-ink, #333); font-size: 22px; font-weight: 600; line-height: 1; text-align: center; caret-color: var(--color-primary, #2a7de1); + font-variant-numeric: tabular-nums; outline: none; - transition: border-color .15s ease, box-shadow .15s ease; + transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .aksrt-settings-modal .aksrt-phone-digit:focus { border-color: var(--color-primary, #2a7de1); - box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.15); + background-color: var(--main-bg-color, #fff); + box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.18); } .aksrt-settings-modal .aksrt-phone-digits.has-error .aksrt-phone-digit { border-color: var(--color-danger, #e02020); + background-color: rgba(224, 32, 32, 0.06); box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.12); } diff --git a/inc/helpers/user-center-renderers/settings-account.php b/inc/helpers/user-center-renderers/settings-account.php index fdad2225..7382009d 100644 --- a/inc/helpers/user-center-renderers/settings-account.php +++ b/inc/helpers/user-center-renderers/settings-account.php @@ -149,17 +149,19 @@ $render_phone_form = static function () use ($agreement): void {
- -

' . esc_html($account_phone_display) . ''); ?>

- + +

+

' . esc_html($account_phone_display) . ''); ?>

+ +
diff --git a/tests/widget-system/account-settings-contract.test.cjs b/tests/widget-system/account-settings-contract.test.cjs index d3169a6b..c22c85a4 100644 --- a/tests/widget-system/account-settings-contract.test.cjs +++ b/tests/widget-system/account-settings-contract.test.cjs @@ -27,7 +27,10 @@ test('account dialogs expose configured email steps, phone steps, and reference assert.match(template, /' \. esc_html\(\$account_phone_display\)/); + assert.doesNotMatch(template, /为确认是您本人操作,请补全绑定手机号 %s/); + assert.match(template, /为确认是您本人操作,请补全绑定手机号/); + assert.match(template, /class="aksrt-phone-digit__edge"><\?php echo esc_html\(\(\$phone_mask\['leading_plus'\] \? '\+' : ''\) \. \(string\) \$phone_mask\['prefix'\]\); \?><\/span>/); + assert.match(template, /<\?php echo esc_html\(\(string\) \$phone_mask\['suffix'\]\); \?><\/span>/); assert.doesNotMatch(template, /name="phone" value="/); assert.match(template, /data-aksrt-phone-digits data-hidden-length/); assert.match(template, /class="aksrt-phone-digit" inputmode="numeric" maxlength="1"/); @@ -39,6 +42,8 @@ test('account dialogs expose configured email steps, phone steps, and reference assert.match(javascript, /stage: 'reset_old_phone'/); assert.match(javascript, /function initPhoneDigits\(/); assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digit \{/); + assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digit__edge \{/); + assert.match(css, /background-color: var\(--main-bg-color, #f7f8fa\)/); assert.match(css, /\.aksrt-settings-modal \.aksrt-phone-digits\.has-error \.aksrt-phone-digit \{/); assert.match(template, /aksrt_render_captcha\('change_email'\)[\s\S]*?id="email-code"/); assert.match(template, /aksrt_render_captcha\('bind_phone'\)[\s\S]*?id="bind-phone-code"/);