迁移A05并恢复认证页水墨背景
This commit is contained in:
rain
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user