修改部分样式

pages/auth/a05-reset-password.vue

@@ -1,168 +1,220 @@
 <!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
 <template>
   <AuthPageShell class="auth-page reset-page">
-      <view class="reset-content">
-        <view class="page-heading">
-          <button
-            class="auth-plain-button back-button"
-            aria-label="返回登录"
-            hover-class="tap-fade"
-            @click="requestBack"
-          >
-            <image
-              class="back-button__icon"
-              src="/static/assets/foundation/transparent/chevron-right.png"
-              mode="aspectFit"
-              aria-hidden="true"
-            />
-          </button>
-          <text class="page-title">重设密码</text>
-          <text class="page-subtitle">验证手机号后设置新的登录密码</text>
-          <image
-            class="reset-divider"
-            src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
-            mode="aspectFit"
-          />
-        </view>
-
-        <view class="form-content">
-          <view
-            class="field-block"
-            :class="{ 'field-block--error': fieldErrors.phone }"
-          >
-            <view class="input-row">
-              <label class="input-label" for="a05-phone"><text class="required-mark">*</text>手机号</label>
-              <input
-                id="a05-phone"
-                v-model.trim="phone"
-                class="auth-input"
-                type="number"
-                maxlength="11"
-          :disabled="sendingCode || submitting || (cooldownSeconds > 0 && phone.length > 0)"
-                placeholder="请输入手机号"
-                placeholder-class="placeholder"
-                :aria-invalid="Boolean(fieldErrors.phone)"
-                :aria-describedby="fieldErrors.phone ? 'a05-phone-error' : undefined"
-                @input="handlePhoneInput"
-              />
-            </view>
-            <text v-if="fieldErrors.phone" id="a05-phone-error" class="field-error" role="alert">{{
-              fieldErrors.phone
-            }}</text>
-          </view>
-
-          <view
-            class="field-block"
-            :class="{ 'field-block--error': fieldErrors.verificationCode }"
-          >
-            <view class="input-row code-row">
-              <label class="input-label" for="a05-verification-code"><text class="required-mark">*</text>验证码</label>
-              <input
-                id="a05-verification-code"
-                v-model.trim="verificationCode"
-                class="auth-input"
-                type="number"
-                maxlength="4"
-                :disabled="submitting"
-                placeholder="请输入验证码"
-                placeholder-class="placeholder"
-                :aria-invalid="Boolean(fieldErrors.verificationCode)"
-                :aria-describedby="fieldErrors.verificationCode ? 'a05-verification-code-error' : undefined"
-                @input="clearFieldError('verificationCode')"
-              />
-              <button
-                class="auth-plain-button get-code"
-                :class="{ 'get-code--disabled': sendingCode || cooldownSeconds > 0 }"
-                :disabled="sendingCode || submitting || cooldownSeconds > 0"
-                hover-class="tap-fade"
-                @click="prepareGetCode"
-                >{{ sendingCode ? "请求中…" : cooldownSeconds > 0 ? `${cooldownSeconds}s 后重发` : "获取验证码" }}</button
-              >
-            </view>
-            <text v-if="fieldErrors.verificationCode" id="a05-verification-code-error" class="field-error" role="alert">{{
-              fieldErrors.verificationCode
-            }}</text>
-          </view>
-
-          <view
-            class="field-block"
-            :class="{ 'field-block--error': fieldErrors.password }"
-          >
-            <view class="input-row">
-              <label class="input-label" for="a05-password"><text class="required-mark">*</text>新密码</label>
-              <input
-                id="a05-password"
-                v-model="password"
-                class="auth-input"
-                password
-                maxlength="32"
-                :disabled="submitting"
-                placeholder="请设置新密码"
-                placeholder-class="placeholder"
-                :aria-invalid="Boolean(fieldErrors.password)"
-                :aria-describedby="fieldErrors.password ? 'a05-password-error' : undefined"
-                @input="clearFieldError('password')"
-              />
-            </view>
-            <text v-if="fieldErrors.password" id="a05-password-error" class="field-error" role="alert">{{
-              fieldErrors.password
-            }}</text>
-          </view>
-
-          <view
-            class="field-block"
-            :class="{ 'field-block--error': fieldErrors.confirmPassword }"
-          >
-            <view class="input-row">
-              <label class="input-label" for="a05-confirm-password"><text class="required-mark">*</text>确认新密码</label>
-              <input
-                id="a05-confirm-password"
-                v-model="confirmPassword"
-                class="auth-input"
-                password
-                maxlength="32"
-                :disabled="submitting"
-                placeholder="请再次输入新密码"
-                placeholder-class="placeholder"
-                :aria-invalid="Boolean(fieldErrors.confirmPassword)"
-                :aria-describedby="fieldErrors.confirmPassword ? 'a05-confirm-password-error' : undefined"
-                @input="clearFieldError('confirmPassword')"
-              />
-            </view>
-            <text v-if="fieldErrors.confirmPassword" id="a05-confirm-password-error" class="field-error" role="alert">{{
-              fieldErrors.confirmPassword
-            }}</text>
-          </view>
-        </view>
-
+    <view class="reset-content">
+      <view class="page-heading">
         <button
-          class="auth-plain-button reset-submit"
-          :disabled="submitting || sendingCode || tacVisible"
-          :aria-busy="submitting"
-          hover-class="button-hover"
-          @click="submitReset"
+          class="auth-plain-button back-button"
+          aria-label="返回登录"
+          hover-class="tap-fade"
+          @click="requestBack"
         >
           <image
-            class="reset-submit__skin"
-            src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
+            class="back-button__icon"
+            src="/static/assets/foundation/transparent/chevron-right.png"
             mode="aspectFit"
+            aria-hidden="true"
           />
-          <text class="reset-submit__content">{{ submitting ? "提交中…" : "确认重设" }}</text>
         </button>
+        <text class="page-title">重设密码</text>
+        <text class="page-subtitle">验证手机号后设置新的登录密码</text>
+        <image
+          class="reset-divider"
+          src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png"
+          mode="aspectFit"
+        />
+      </view>
 
-        <text class="reset-tip">重设成功后，请使用新密码登录</text>
-        <view class="login-entry">
-          <text>想起密码了？</text>
-          <button
-            class="auth-plain-button login-entry__link"
-            :disabled="submitting || sendingCode || tacVisible"
-            hover-class="tap-fade"
-            @click="requestBack"
-            >返回登录</button
+      <view class="form-content">
+        <view
+          class="field-block"
+          :class="{ 'field-block--error': fieldErrors.phone }"
+        >
+          <view class="input-row">
+            <label class="input-label" for="a05-phone"
+              ><text class="required-mark">*</text>手机号</label
+            >
+            <input
+              id="a05-phone"
+              v-model.trim="phone"
+              class="auth-input"
+              type="number"
+              maxlength="11"
+              :disabled="
+                sendingCode ||
+                submitting ||
+                (cooldownSeconds > 0 && phone.length > 0)
+              "
+              placeholder="请输入手机号"
+              placeholder-class="placeholder"
+              :aria-invalid="Boolean(fieldErrors.phone)"
+              :aria-describedby="
+                fieldErrors.phone ? 'a05-phone-error' : undefined
+              "
+              @input="handlePhoneInput"
+            />
+          </view>
+          <text
+            v-if="fieldErrors.phone"
+            id="a05-phone-error"
+            class="field-error"
+            role="alert"
+            >{{ fieldErrors.phone }}</text
+          >
+        </view>
+
+        <view
+          class="field-block"
+          :class="{ 'field-block--error': fieldErrors.verificationCode }"
+        >
+          <view class="input-row code-row">
+            <label class="input-label" for="a05-verification-code"
+              ><text class="required-mark">*</text>验证码</label
+            >
+            <input
+              id="a05-verification-code"
+              v-model.trim="verificationCode"
+              class="auth-input"
+              type="number"
+              maxlength="4"
+              :disabled="submitting"
+              placeholder="请输入验证码"
+              placeholder-class="placeholder"
+              :aria-invalid="Boolean(fieldErrors.verificationCode)"
+              :aria-describedby="
+                fieldErrors.verificationCode
+                  ? 'a05-verification-code-error'
+                  : undefined
+              "
+              @input="clearFieldError('verificationCode')"
+            />
+            <button
+              class="auth-plain-button get-code"
+              :class="{
+                'get-code--disabled': sendingCode || cooldownSeconds > 0,
+              }"
+              :disabled="sendingCode || submitting || cooldownSeconds > 0"
+              hover-class="tap-fade"
+              @click="prepareGetCode"
+            >
+              {{
+                sendingCode
+                  ? "请求中…"
+                  : cooldownSeconds > 0
+                    ? `${cooldownSeconds}s 后重发`
+                    : "获取验证码"
+              }}
+            </button>
+          </view>
+          <text
+            v-if="fieldErrors.verificationCode"
+            id="a05-verification-code-error"
+            class="field-error"
+            role="alert"
+            >{{ fieldErrors.verificationCode }}</text
+          >
+        </view>
+
+        <view
+          class="field-block"
+          :class="{ 'field-block--error': fieldErrors.password }"
+        >
+          <view class="input-row">
+            <label class="input-label" for="a05-password"
+              ><text class="required-mark">*</text>新密码</label
+            >
+            <input
+              id="a05-password"
+              v-model="password"
+              class="auth-input"
+              password
+              maxlength="32"
+              :disabled="submitting"
+              placeholder="请设置新密码"
+              placeholder-class="placeholder"
+              :aria-invalid="Boolean(fieldErrors.password)"
+              :aria-describedby="
+                fieldErrors.password ? 'a05-password-error' : undefined
+              "
+              @input="clearFieldError('password')"
+            />
+          </view>
+          <text
+            v-if="fieldErrors.password"
+            id="a05-password-error"
+            class="field-error"
+            role="alert"
+            >{{ fieldErrors.password }}</text
+          >
+        </view>
+
+        <view
+          class="field-block"
+          :class="{ 'field-block--error': fieldErrors.confirmPassword }"
+        >
+          <view class="input-row">
+            <label class="input-label" for="a05-confirm-password"
+              ><text class="required-mark">*</text>确认新密码</label
+            >
+            <input
+              id="a05-confirm-password"
+              v-model="confirmPassword"
+              class="auth-input"
+              password
+              maxlength="32"
+              :disabled="submitting"
+              placeholder="请再次输入新密码"
+              placeholder-class="placeholder"
+              :aria-invalid="Boolean(fieldErrors.confirmPassword)"
+              :aria-describedby="
+                fieldErrors.confirmPassword
+                  ? 'a05-confirm-password-error'
+                  : undefined
+              "
+              @input="clearFieldError('confirmPassword')"
+            />
+          </view>
+          <text
+            v-if="fieldErrors.confirmPassword"
+            id="a05-confirm-password-error"
+            class="field-error"
+            role="alert"
+            >{{ fieldErrors.confirmPassword }}</text
           >
         </view>
       </view>
 
+      <button
+        class="auth-plain-button reset-submit"
+        :disabled="submitting || sendingCode || tacVisible"
+        :aria-busy="submitting"
+        hover-class="button-hover"
+        @click="submitReset"
+      >
+        <image
+          class="reset-submit__skin"
+          src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
+          mode="aspectFit"
+        />
+        <text class="reset-submit__content">{{
+          submitting ? "提交中…" : "确认重设"
+        }}</text>
+      </button>
+
+      <text class="reset-tip">重设成功后，请使用新密码登录</text>
+      <view class="login-entry">
+        <text>想起密码了？</text>
+        <button
+          class="auth-plain-button login-entry__link"
+          :disabled="submitting || sendingCode || tacVisible"
+          hover-class="tap-fade"
+          @click="requestBack"
+        >
+          返回登录
+        </button>
+      </view>
+    </view>
+
     <template #overlay>
       <TacVerification
         :visible="tacVisible"
@@ -230,11 +282,7 @@ import { createAuthSmsCooldown } from "@/utils/auth-sms-cooldown.js";
 import { runtimeConfig } from "@/utils/config.js";
 import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
 import { calcMD5 } from "@/utils/md5.js";
-import {
-  handleBackPress,
-  returnTo,
-  runBackGuard,
-} from "@/utils/navigation.js";
+import { handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";
 import {
   PASSWORD_POLICY_MESSAGE,
   validatePassword,
@@ -260,14 +308,15 @@ const fieldErrors = ref({
   password: "",
   confirmPassword: "",
 });
-const isDirty = computed(() =>
-  !successVisible.value &&
-  Boolean(
-    phone.value ||
+const isDirty = computed(
+  () =>
+    !successVisible.value &&
+    Boolean(
+      phone.value ||
       verificationCode.value ||
       password.value ||
       confirmPassword.value,
-  ),
+    ),
 );
 let feedbackTimer = null;
 let tacSequence = 0;
@@ -348,7 +397,8 @@ const handlePhoneInput = () => {
 };
 
 const prepareGetCode = async () => {
-  if (sendingCode.value || submitting.value || cooldownSeconds.value > 0) return;
+  if (sendingCode.value || submitting.value || cooldownSeconds.value > 0)
+    return;
   if (!isAuthPhone(phone.value)) {
     fieldErrors.value.phone = "请输入正确手机号";
     return;
@@ -363,7 +413,8 @@ const prepareGetCode = async () => {
       { requestController: authRequestController },
     );
     if (!pageActive) return;
-    if (phone.value !== requestedPhone) throw new Error("手机号已变化，请重新获取验证码");
+    if (phone.value !== requestedPhone)
+      throw new Error("手机号已变化，请重新获取验证码");
     const requirement = normalizeCaptchaRequirement(response);
     if (!requirement.required) {
       await appApi.sendSmsCode(
@@ -401,7 +452,8 @@ const completeTac = async (result) => {
   if (!expectedContext) return;
   try {
     const ticket = normalizeTacSuccess(result, expectedContext.requestId);
-    if (phone.value !== expectedContext.subject) throw new Error("手机号已变化，请重新验证");
+    if (phone.value !== expectedContext.subject)
+      throw new Error("手机号已变化，请重新验证");
     closeTac();
     sendingCode.value = true;
     await appApi.sendSmsCode(
@@ -487,7 +539,6 @@ const submitReset = async () => {
 </script>
 
 <style scoped lang="scss">
-
 .reset-content {
   display: flex;
   flex: 1;
@@ -668,5 +719,4 @@ const submitReset = async () => {
 .button-hover {
   opacity: 0.72;
 }
-
 </style>