rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构A01为自适应文档流

Browse Source
This commit is contained in:
rain
2026-07-21 10:45:59 +08:00
parent 15cce0aba8
commit 119d820308
1 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a01-entry.vue
+59 -44
View File
@@ -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"
src="/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"
mode="scaleToFill"
class="auth-header__image"
src="/static/assets/modules/auth/opaque/a01-vnext-header-v1.png"
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: 100%;
overflow-y: auto;
background: #f7f0e5;
min-height: var(--app-viewport-height);
overflow-x: hidden;
background: #940400;
color: #493323;
}
.page-canvas {
display: grid;
.auth-header {
position: relative;
flex: 0 0 auto;
box-sizing: border-box;
width: 100%;
min-height: calc(1665rpx + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
padding-top: var(--app-safe-top);
background: #940400;
}
.page-backdrop {
z-index: 0;
grid-area: 1 / 1;
align-self: start;
.auth-header__image {
display: block;
width: 100%;
height: 1665rpx;
height: auto;
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;
position: absolute;
top: calc(var(--app-safe-top) + clamp(8px, 2vw, 14px));
left: 50%;
width: clamp(60px, 19vw, 86px);
height: clamp(72px, 23vw, 104px);
transform: translateX(-50%);
pointer-events: none;
}
.login-content {
z-index: 2;
grid-area: 1 / 1;
.auth-paper {
display: flex;
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;
margin-top: 10rpx;
min-height: var(--app-touch-min);
}
.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;
}