重构A01为自适应文档流

pages/auth/a01-entry.vue

@@ -1,18 +1,20 @@
 <!-- 页面编号：A-01；用途：APP 唯一登录入口，承载密码、验证码与微信登录入口。 -->
 <template>
   <view class="auth-page login-page">
-    <view class="page-canvas">
+    <view class="auth-header">
       <image
-        class="page-backdrop"
+        class="auth-header__image"
-        src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
+        src="/static/assets/modules/auth/opaque/a01-vnext-header-v1.png"
-        mode="scaleToFill"
+        mode="widthFix"
       />
       <image
         class="brand-seal"
         src="/static/assets/foundation/transparent/brand-seal.png"
         mode="aspectFit"
       />
+    </view>
 
+    <view class="auth-paper">
       <view class="login-content">
         <view class="login-heading">
           <text class="login-title">登录家谱</text>
@@ -374,49 +376,62 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 
 <style scoped lang="scss">
 .auth-page {
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   width: 100%;
-  height: 100dvh;
+  min-height: var(--app-viewport-height);
-  min-height: 100%;
+  overflow-x: hidden;
-  overflow-y: auto;
+  background: #940400;
-  background: #f7f0e5;
   color: #493323;
 }
 
-.page-canvas {
+.auth-header {
-  display: grid;
+  position: relative;
+  flex: 0 0 auto;
   box-sizing: border-box;
   width: 100%;
-  min-height: calc(1665rpx + env(safe-area-inset-bottom));
+  padding-top: var(--app-safe-top);
-  padding-bottom: env(safe-area-inset-bottom);
+  background: #940400;
 }
 
-.page-backdrop {
+.auth-header__image {
-  z-index: 0;
+  display: block;
-  grid-area: 1 / 1;
-  align-self: start;
   width: 100%;
-  height: 1665rpx;
+  height: auto;
   pointer-events: none;
 }
 
 .brand-seal {
-  z-index: 1;
+  position: absolute;
-  grid-area: 1 / 1;
+  top: calc(var(--app-safe-top) + clamp(8px, 2vw, 14px));
-  align-self: start;
+  left: 50%;
-  justify-self: center;
+  width: clamp(60px, 19vw, 86px);
-  width: 184rpx;
+  height: clamp(72px, 23vw, 104px);
-  height: 221rpx;
+  transform: translateX(-50%);
-  margin-top: 64rpx;
   pointer-events: none;
 }
 
-.login-content {
+.auth-paper {
-  z-index: 2;
+  display: flex;
-  grid-area: 1 / 1;
+  flex: 1;
   box-sizing: border-box;
   width: 100%;
-  padding: 480rpx 64rpx 34rpx;
+  padding-bottom: var(--app-safe-bottom);
+  background: #f7f0e5 url("/static/assets/foundation/opaque/auth-page-paper.jpg") center top / 100% auto repeat-y;
+}
+
+.login-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 480px;
+  min-width: 0;
+  margin: 0 auto;
+  padding: clamp(10px, 2.2vh, 20px) clamp(24px, 8.5vw, 44px);
 }
 
 .login-heading {
@@ -424,7 +439,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 142rpx;
+  min-height: 56px;
 }
 
 .login-title {
@@ -445,8 +460,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 .login-tabs {
   display: flex;
   align-items: flex-end;
-  height: 114rpx;
+  min-height: var(--app-touch-min);
-  margin-top: 10rpx;
 }
 
 .login-tab {
@@ -486,7 +500,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  min-height: 112rpx;
+  min-height: var(--app-touch-min);
   padding-left: 12rpx;
   border-bottom: 1rpx solid rgba(182, 116, 43, 0.68);
 }
@@ -506,7 +520,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 .auth-input {
   flex: 1;
   min-width: 0;
-  min-height: 104rpx;
+  min-height: var(--app-touch-min);
   color: #493323;
   font-size: 40rpx;
 }
@@ -521,7 +535,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   align-items: center;
   justify-content: center;
   width: 88rpx;
-  height: 88rpx;
+  height: var(--app-touch-min);
 }
 
 .password-toggle__icon {
@@ -535,7 +549,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   align-items: center;
   justify-content: flex-end;
   min-width: 142rpx;
-  min-height: 88rpx;
+  min-height: var(--app-touch-min);
   color: #a9160d;
   font-size: 32rpx;
 }
@@ -544,13 +558,13 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  min-height: 110rpx;
+  min-height: var(--app-touch-min);
 }
 
 .forgot-password {
   display: flex;
   align-items: center;
-  min-height: 88rpx;
+  min-height: var(--app-touch-min);
   color: #a9160d;
   font-size: 34rpx;
 }
@@ -562,7 +576,8 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 }
 
 .login-submit {
-  min-height: 92rpx;
+  min-height: var(--app-touch-min);
+  height: var(--app-touch-min);
 }
 
 .button-skin {
@@ -583,7 +598,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 .other-login-divider {
   display: flex;
   align-items: center;
-  min-height: 100rpx;
+  min-height: 30px;
   color: #9f6a27;
   font-size: 32rpx;
   white-space: nowrap;
@@ -608,7 +623,8 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 }
 
 .wechat-login {
-  min-height: 100rpx;
+  min-height: var(--app-touch-min);
+  height: var(--app-touch-min);
   color: #493323;
   font-size: 40rpx;
   letter-spacing: 3rpx;
@@ -633,7 +649,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100rpx;
+  min-height: var(--app-touch-min);
   color: #493323;
   font-size: 31rpx;
 }
@@ -641,13 +657,12 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 .register-link {
   display: flex;
   align-items: center;
-  min-height: 88rpx;
+  min-height: var(--app-touch-min);
   margin-left: 8rpx;
   color: #a9160d;
 }
 
 .agreement-area {
-  min-height: 106rpx;
   color: #58483c;
 }
 
@@ -655,7 +670,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 74rpx;
+  min-height: var(--app-touch-min);
   font-size: 24rpx;
   line-height: 32rpx;
 }