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

迁移A05并恢复认证页水墨背景

Browse Source
This commit is contained in:
rain
2026-07-21 12:08:15 +08:00
parent 75c8e4fcbb
commit b774ce8212
4 changed files with 73 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AuthPageShell.vue
+7 -1
View File
@@ -67,6 +67,12 @@
box-sizing: border-box;
width: 100%;
padding-bottom: var(--app-safe-bottom);
background: #f7f0e5 url("/static/assets/foundation/opaque/auth-page-paper.jpg") center top / 100% auto repeat-y;
background-color: #f7f0e5;
background-image:
url("/static/assets/modules/auth/opaque/a01-red-hall-ink-backdrop-v1.png"),
url("/static/assets/foundation/opaque/auth-page-paper.jpg");
background-position: center calc(-48.18vw), center top;
background-size: 100% auto, 100% auto;
background-repeat: no-repeat, repeat-y;
}
</style>
pages/auth/a05-reset-password.vue
+62 -109
View File
@@ -1,18 +1,6 @@
<!-- 页面编号：A-05；用途：通过手机号验证后重设登录密码。 -->
<template>
<view class="auth-page reset-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 reset-page">
<view class="reset-content">
<view class="page-heading">
<view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -147,48 +135,50 @@
>
</view>
</view>
</view>
<view v-if="successVisible" class="success-layer">
<view class="success-dialog">
<image
class="success-dialog__skin"
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
mode="aspectFit"
/>
<view class="success-dialog__content">
<template #overlay>
<view v-if="successVisible" class="success-layer">
<view class="success-dialog">
<image
class="success-mark"
src="/static/assets/foundation/transparent/brand-seal.png"
class="success-dialog__skin"
src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png"
mode="aspectFit"
/>
<text class="success-title">密码已重设</text>
<text class="success-copy">请返回登录页，使用新密码登录</text>
<view
class="success-action"
hover-class="button-hover"
@click="prepareLogin"
>
<view class="success-dialog__content">
<image
class="success-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
class="success-mark"
src="/static/assets/foundation/transparent/brand-seal.png"
mode="aspectFit"
/>
<text class="success-action__copy">返回登录</text>
<text class="success-title">密码已重设</text>
<text class="success-copy">请返回登录页，使用新密码登录</text>
<view
class="success-action"
hover-class="button-hover"
@click="prepareLogin"
>
<image
class="success-action__skin"
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="success-action__copy">返回登录</text>
</view>
</view>
</view>
</view>
</view>
<view v-if="feedbackVisible" class="feedback-toast">
<text class="feedback-toast__copy">{{ feedbackMessage }}</text>
</view>
</view>
<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 verificationCode = ref("");
@@ -262,51 +252,22 @@ const submitReset = () => {
</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;
}
.reset-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;
@@ -320,8 +281,8 @@ const submitReset = () => {
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;
}
@@ -331,13 +292,15 @@ const submitReset = () => {
transform: scaleX(-1);
}
.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;
@@ -345,6 +308,7 @@ const submitReset = () => {
letter-spacing: 1rpx;
}
.reset-divider {
grid-column: 1;
grid-row: 3;
width: 300rpx;
height: 50rpx;
@@ -361,31 +325,31 @@ const submitReset = () => {
.input-row {
display: flex;
align-items: center;
min-height: 84rpx;
min-height: var(--app-touch-min);
border-bottom: 1rpx solid #cfaa70;
}
.input-label {
flex: 0 0 162rpx;
color: #674b35;
font-size: 29rpx;
font-size: 30rpx;
}
.auth-input {
flex: 1;
min-width: 0;
min-height: 82rpx;
color: #3f2c1d;
font-size: 27rpx;
min-height: var(--app-touch-min);
color: #493323;
font-size: 30rpx;
}
.placeholder {
color: #a79e94;
color: #9f968d;
}
.get-code {
flex: 0 0 auto;
padding-left: 14rpx;
border-left: 1rpx solid #d7bd94;
color: #a7160c;
font-size: 23rpx;
font-size: 26rpx;
}
.field-error {
display: block;
@@ -402,7 +366,7 @@ const submitReset = () => {
.reset-submit {
display: grid;
place-items: center;
min-height: 104rpx;
min-height: var(--app-touch-min);
margin-top: 26rpx;
}
@@ -416,28 +380,29 @@ const submitReset = () => {
z-index: 1;
grid-area: 1 / 1;
color: #fffaf0;
font-size: 39rpx;
font-size: 36rpx;
letter-spacing: 6rpx;
}
.reset-tip {
display: block;
margin-top: 22rpx;
color: #806c58;
font-size: 22rpx;
font-size: 24rpx;
text-align: center;
}
.login-entry {
display: flex;
align-items: center;
justify-content: center;
min-height: 78rpx;
color: #6b5a4a;
font-size: 24rpx;
min-height: var(--app-touch-min);
margin-top: auto;
color: #493323;
font-size: 28rpx;
}
.login-entry__link {
display: flex;
align-items: center;
min-height: 78rpx;
min-height: var(--app-touch-min);
margin-left: 8rpx;
color: #a7160c;
}
@@ -458,7 +423,7 @@ const submitReset = () => {
display: grid;
width: 620rpx;
min-height: 520rpx;
max-height: calc(100vh - 80rpx);
max-height: calc(var(--app-viewport-height) - 40px);
}
.success-dialog__skin {
grid-area: 1 / 1;
@@ -512,7 +477,7 @@ const submitReset = () => {
.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;
@@ -541,16 +506,4 @@ const submitReset = () => {
opacity: 0.72;
}
@media screen and (max-width: 340px) {
.reset-content {
padding-right: 48rpx;
padding-left: 48rpx;
}
.page-title {
font-size: 60rpx;
}
.input-label {
flex-basis: 150rpx;
}
}
</style>
tests/a01-a02-ui-contract.ps1
+1 -1
View File
@@ -74,7 +74,6 @@ Assert-Contains -Content $entry -Expected '<AuthPageShell' -Message 'A01 must co
foreach ($forbidden in @(
'class="page-canvas"',
'class="page-backdrop"',
'a01-red-hall-ink-backdrop-v1.png',
'mode="scaleToFill"',
'--auth-paper-start',
'1665rpx'
@@ -82,6 +81,7 @@ foreach ($forbidden in @(
Assert-NotContains -Content $entry -Unexpected $forbidden -Message "A01 still uses rejected page coordinates: $forbidden"
Assert-NotContains -Content $shell -Unexpected $forbidden -Message "The adaptive shell uses rejected page coordinates: $forbidden"
}
Assert-Contains -Content $shell -Expected 'a01-red-hall-ink-backdrop-v1.png' -Message 'The shared auth shell must preserve the approved paper scenery as decoration.'
$pageRule = [regex]::Match($shell, '(?ms)^\.auth-shell\s*\{(?<Body>.*?)^\}')
$headerRule = [regex]::Match($shell, '(?ms)^\.auth-shell__header\s*\{(?<Body>.*?)^\}')
tests/auth-page-shell-contract.ps1
+3
View File
@@ -21,7 +21,10 @@ foreach ($required in @(
'a01-vnext-header-v1.png',
'mode="widthFix"',
'class="auth-shell__paper"',
'a01-red-hall-ink-backdrop-v1.png',
'auth-page-paper.jpg',
'background-position: center calc(-48.18vw), center top;',
'background-repeat: no-repeat, repeat-y;',
'<slot />',
'<slot name="overlay" />',
'min-height: var(--app-viewport-height);'