迁移A04为自适应文档流

pages/auth/a04-register.vue

@@ -1,18 +1,6 @@
 <!-- 页面编号：A-04；用途：注册账号与本页服务协议确认。 -->
 <template>
-  <view class="auth-page register-page">
-    <view class="page-canvas">
-      <image
-        class="page-backdrop"
-        src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
-        mode="scaleToFill"
-      />
-      <image
-        class="brand-seal"
-        src="/static/assets/foundation/transparent/brand-seal.png"
-        mode="aspectFit"
-      />
-
+  <AuthPageShell class="auth-page register-page">
       <view class="register-content">
         <view class="page-heading">
           <view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -149,17 +137,19 @@
           >
         </view>
       </view>
-    </view>
 
-    <view v-if="feedbackVisible" class="feedback-toast">
-      <text class="feedback-toast__copy">{{ feedbackMessage }}</text>
-    </view>
-  </view>
+    <template #overlay>
+      <view v-if="feedbackVisible" class="feedback-toast">
+        <text class="feedback-toast__copy">{{ feedbackMessage }}</text>
+      </view>
+    </template>
+  </AuthPageShell>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { onUnload } from "@dcloudio/uni-app";
+import AuthPageShell from "@/components/AuthPageShell.vue";
 
 const phone = ref("");
 const password = ref("");
@@ -228,51 +218,22 @@ const submitRegister = () => {
 </script>
 
 <style scoped lang="scss">
-.auth-page {
-  width: 100%;
-  height: 100dvh;
-  min-height: 100%;
-  overflow-y: auto;
-  background: #f7f0e4;
-  color: #493323;
-}
-
-.page-canvas {
-  display: grid;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: calc(1665rpx + env(safe-area-inset-bottom));
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-.page-backdrop {
-  grid-area: 1 / 1;
-  align-self: start;
-  width: 100%;
-  height: 1665rpx;
-  pointer-events: none;
-}
-
-.brand-seal {
-  z-index: 1;
-  grid-area: 1 / 1;
-  align-self: start;
-  justify-self: center;
-  width: 184rpx;
-  height: 221rpx;
-  margin-top: 64rpx;
-  pointer-events: none;
-}
-
 .register-content {
-  z-index: 2;
-  grid-area: 1 / 1;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
   box-sizing: border-box;
-  padding: 430rpx 64rpx 46rpx;
+  width: 100%;
+  max-width: 480px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: clamp(10px, 2.2vh, 20px) clamp(24px, 8.5vw, 44px);
 }
 
 .page-heading {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto auto auto;
   justify-items: center;
   min-height: 154rpx;
@@ -286,8 +247,8 @@ const submitRegister = () => {
   justify-self: start;
   align-items: center;
   justify-content: center;
-  width: 88rpx;
-  height: 88rpx;
+  width: var(--app-touch-min);
+  height: var(--app-touch-min);
   margin-top: 10rpx;
 }
 
@@ -298,14 +259,16 @@ const submitRegister = () => {
 }
 
 .page-title {
+  grid-column: 1;
   grid-row: 1;
   color: #9f170f;
-  font-size: 66rpx;
+  font-size: 58rpx;
   font-weight: 700;
   letter-spacing: 7rpx;
 }
 
 .page-subtitle {
+  grid-column: 1;
   grid-row: 2;
   margin-top: 12rpx;
   color: #806c58;
@@ -314,6 +277,7 @@ const submitRegister = () => {
 }
 
 .register-divider {
+  grid-column: 1;
   grid-row: 3;
   width: 300rpx;
   height: 50rpx;
@@ -331,26 +295,26 @@ const submitRegister = () => {
 .input-row {
   display: flex;
   align-items: center;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
 }
 
 .input-label {
   flex: 0 0 152rpx;
   color: #674b35;
-  font-size: 31rpx;
+  font-size: 30rpx;
 }
 
 .auth-input {
   flex: 1;
   min-width: 0;
-  min-height: 96rpx;
-  color: #3f2c1d;
-  font-size: 29rpx;
+  min-height: var(--app-touch-min);
+  color: #493323;
+  font-size: 30rpx;
 }
 
 .placeholder {
-  color: #a79e94;
+  color: #9f968d;
 }
 
 .field-error,
@@ -372,7 +336,7 @@ const submitRegister = () => {
 .register-submit {
   display: grid;
   place-items: center;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   margin-top: 36rpx;
 }
 
@@ -386,7 +350,7 @@ const submitRegister = () => {
   z-index: 1;
   grid-area: 1 / 1;
   color: #fffaf0;
-  font-size: 39rpx;
+  font-size: 36rpx;
   letter-spacing: 6rpx;
 }
 
@@ -399,9 +363,9 @@ const submitRegister = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 76rpx;
-  color: #58483c;
-  font-size: 22rpx;
+  min-height: var(--app-touch-min);
+  color: #493323;
+  font-size: 24rpx;
   line-height: 30rpx;
 }
 
@@ -446,14 +410,15 @@ const submitRegister = () => {
   align-items: center;
   justify-content: center;
   min-height: 82rpx;
-  color: #6b5a4a;
-  font-size: 25rpx;
+  margin-top: auto;
+  color: #493323;
+  font-size: 28rpx;
 }
 
 .login-entry__link {
   display: flex;
   align-items: center;
-  min-height: 82rpx;
+  min-height: var(--app-touch-min);
   margin-left: 8rpx;
   color: #a7160c;
 }
@@ -468,7 +433,7 @@ const submitRegister = () => {
 .feedback-toast {
   position: fixed;
   z-index: 30;
-  top: calc(env(safe-area-inset-top) + 24rpx);
+  top: calc(var(--status-bar-height, 0px) + 24rpx);
   left: 50%;
   display: flex;
   align-items: center;