视觉审核完成30%
This commit is contained in:
rain
@@ -12,7 +12,7 @@
|
||||
</view>
|
||||
<text class="page-title">重设密码</text>
|
||||
<text class="page-subtitle">验证手机号后设置新的登录密码</text>
|
||||
<image class="reset-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
|
||||
<image class="reset-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
@@ -28,7 +28,7 @@
|
||||
<view class="input-row code-row">
|
||||
<text class="input-label">验证码</text>
|
||||
<input v-model.trim="verificationCode" class="auth-input" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="placeholder" @input="clearFieldError('verificationCode')" />
|
||||
<view class="get-code" hover-class="tap-fade" @click="prepareGetCode">{{ codeRequested ? '重新获取' : '获取验证码' }}</view>
|
||||
<view class="get-code" hover-class="tap-fade" @click="prepareGetCode">获取验证码</view>
|
||||
</view>
|
||||
<text v-if="fieldErrors.verificationCode" class="field-error">{{ fieldErrors.verificationCode }}</text>
|
||||
</view>
|
||||
@@ -51,7 +51,7 @@
|
||||
</view>
|
||||
|
||||
<view class="reset-submit" hover-class="button-hover" @click="submitReset">
|
||||
<image class="reset-submit__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<image class="reset-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
|
||||
<text class="reset-submit__content">确认重设</text>
|
||||
</view>
|
||||
|
||||
@@ -63,31 +63,15 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 发送短信验证码前进行行为验证；关闭时不清空表单。 -->
|
||||
<view v-if="verificationVisible" class="verification-layer" @click="closeVerification">
|
||||
<view class="verification-dialog" @click.stop>
|
||||
<image class="verification-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<view class="verification-dialog__content">
|
||||
<text class="verification-title">安全验证</text>
|
||||
<text class="verification-copy">发送验证码前需要完成行为验证</text>
|
||||
<text class="verification-note">验证数据将在接口接入后启用</text>
|
||||
<view class="verification-actions">
|
||||
<view class="verification-action" hover-class="tap-fade" @click="closeVerification">取消</view>
|
||||
<view class="verification-action verification-action--primary" hover-class="tap-fade" @click="confirmVerification">完成验证</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="successVisible" class="success-layer">
|
||||
<view class="success-dialog">
|
||||
<image class="success-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
|
||||
<image class="success-dialog__skin" src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
|
||||
<view class="success-dialog__content">
|
||||
<text class="success-mark">✓</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/opaque/a01-primary-button.png" mode="scaleToFill" />
|
||||
<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>
|
||||
@@ -95,7 +79,6 @@
|
||||
</view>
|
||||
|
||||
<view v-if="feedbackVisible" class="feedback-toast">
|
||||
<image class="feedback-toast__skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
|
||||
<text class="feedback-toast__copy">{{ feedbackMessage }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -109,8 +92,6 @@ const phone = ref('')
|
||||
const verificationCode = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const codeRequested = ref(false)
|
||||
const verificationVisible = ref(false)
|
||||
const successVisible = ref(false)
|
||||
const feedbackVisible = ref(false)
|
||||
const feedbackMessage = ref('')
|
||||
@@ -151,17 +132,7 @@ const prepareGetCode = () => {
|
||||
return
|
||||
}
|
||||
fieldErrors.value.phone = ''
|
||||
verificationVisible.value = true
|
||||
}
|
||||
|
||||
const closeVerification = () => {
|
||||
verificationVisible.value = false
|
||||
}
|
||||
|
||||
const confirmVerification = () => {
|
||||
closeVerification()
|
||||
codeRequested.value = true
|
||||
showFeedback('验证码已发送')
|
||||
showFeedback('滑动验证待接口接入')
|
||||
}
|
||||
|
||||
const validateForm = () => {
|
||||
@@ -214,8 +185,8 @@ const submitReset = () => {
|
||||
z-index: 1;
|
||||
top: 64rpx;
|
||||
left: 50%;
|
||||
width: 220rpx;
|
||||
height: 264rpx;
|
||||
width: 184rpx;
|
||||
height: 221rpx;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -247,9 +218,9 @@ const submitReset = () => {
|
||||
}
|
||||
|
||||
.back-button__icon { width: 42rpx; height: 42rpx; transform: scaleX(-1); }
|
||||
.page-title { color: #9f170f; font-family: STSong, SimSun, serif; font-size: 66rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.page-title { color: #9f170f; font-size: 66rpx; font-weight: 700; letter-spacing: 7rpx; }
|
||||
.page-subtitle { margin-top: 12rpx; color: #806c58; font-size: 25rpx; letter-spacing: 1rpx; }
|
||||
.reset-divider { width: 154rpx; height: 34rpx; margin-top: 10rpx; }
|
||||
.reset-divider { width: 300rpx; height: 50rpx; margin-top: 2rpx; filter: brightness(0.68) saturate(1.5) contrast(1.2); }
|
||||
.form-content { margin-top: 8rpx; }
|
||||
.field-block { min-height: 114rpx; }
|
||||
|
||||
@@ -260,7 +231,7 @@ const submitReset = () => {
|
||||
border-bottom: 1rpx solid #cfaa70;
|
||||
}
|
||||
|
||||
.input-label { flex: 0 0 162rpx; color: #674b35; font-family: STSong, SimSun, serif; font-size: 29rpx; }
|
||||
.input-label { flex: 0 0 162rpx; color: #674b35; font-size: 29rpx; }
|
||||
.auth-input { flex: 1; min-width: 0; height: 82rpx; color: #3f2c1d; font-size: 27rpx; }
|
||||
.placeholder { color: #a79e94; }
|
||||
.get-code { flex: 0 0 auto; padding-left: 14rpx; border-left: 1rpx solid #d7bd94; color: #a7160c; font-size: 23rpx; }
|
||||
@@ -279,12 +250,11 @@ const submitReset = () => {
|
||||
|
||||
.reset-submit__skin,
|
||||
.success-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.reset-submit__content { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 35rpx; letter-spacing: 6rpx; }
|
||||
.reset-submit__content { position: relative; z-index: 1; color: #fffaf0; font-size: 39rpx; letter-spacing: 6rpx; }
|
||||
.reset-tip { display: block; margin-top: 22rpx; color: #806c58; font-size: 22rpx; text-align: center; }
|
||||
.login-entry { display: flex; align-items: center; justify-content: center; min-height: 78rpx; color: #6b5a4a; font-size: 24rpx; }
|
||||
.login-entry__link { display: flex; align-items: center; min-height: 78rpx; margin-left: 8rpx; color: #a7160c; }
|
||||
|
||||
.verification-layer,
|
||||
.success-layer {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
@@ -297,27 +267,17 @@ const submitReset = () => {
|
||||
background: rgba(35, 18, 10, 0.62);
|
||||
}
|
||||
|
||||
.verification-dialog,
|
||||
.success-dialog { position: relative; width: 100%; max-width: 670rpx; min-height: 500rpx; }
|
||||
.verification-dialog__skin,
|
||||
.success-dialog { position: relative; width: 620rpx; height: 520rpx; }
|
||||
.success-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.verification-dialog__content,
|
||||
.success-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 500rpx; padding: 92rpx 70rpx 64rpx; text-align: center; }
|
||||
.verification-title,
|
||||
.success-title { color: #8f160f; font-family: STSong, SimSun, serif; font-size: 45rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.verification-copy,
|
||||
.success-copy { margin-top: 32rpx; color: #513a28; font-size: 27rpx; line-height: 42rpx; }
|
||||
.verification-note { margin-top: 14rpx; color: #8d7965; font-size: 22rpx; }
|
||||
.verification-actions { display: flex; width: 100%; margin-top: 56rpx; border-top: 1rpx solid #d6bb91; }
|
||||
.verification-action { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 86rpx; color: #73533a; font-size: 27rpx; }
|
||||
.verification-action--primary { border-left: 1rpx solid #d6bb91; color: #a7160c; }
|
||||
.success-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: 100%; padding: 64rpx 64rpx 42rpx; text-align: center; }
|
||||
.success-title { color: #8f160f; font-size: 43rpx; font-weight: 700; letter-spacing: 4rpx; }
|
||||
.success-copy { margin-top: 18rpx; color: #513a28; font-size: 26rpx; line-height: 40rpx; }
|
||||
.success-mark { display: flex; align-items: center; justify-content: center; width: 82rpx; height: 82rpx; margin-bottom: 20rpx; border: 2rpx solid #a7160c; border-radius: 50%; color: #a7160c; font-size: 48rpx; }
|
||||
.success-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 92rpx; margin-top: 38rpx; overflow: hidden; }
|
||||
.success-action__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 30rpx; letter-spacing: 4rpx; }
|
||||
.success-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 82rpx; margin-top: 24rpx; overflow: hidden; }
|
||||
.success-action__copy { position: relative; z-index: 1; color: #fffaf0; font-size: 30rpx; letter-spacing: 4rpx; }
|
||||
|
||||
.feedback-toast { position: fixed; z-index: 30; top: calc(40rpx + env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; justify-content: center; min-width: 280rpx; min-height: 80rpx; padding: 0 42rpx; transform: translateX(-50%); }
|
||||
.feedback-toast__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
.feedback-toast__copy { position: relative; z-index: 1; color: #5e402b; font-size: 24rpx; }
|
||||
.feedback-toast { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 24rpx); left: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 590rpx; min-height: 82rpx; border: 16rpx solid transparent; border-width: 16rpx 74rpx; border-image-source: url('/static/assets/foundation/transparent/a01-scroll-toast-v3.png'); border-image-slice: 58 280 fill; border-image-width: 16rpx 74rpx; border-image-repeat: stretch; background: transparent; transform: translateX(-50%); }
|
||||
.feedback-toast__copy { position: relative; z-index: 1; padding: 16rpx 36rpx; color: #5c4330; font-size: 25rpx; text-align: center; }
|
||||
.tap-fade,
|
||||
.button-hover { opacity: 0.72; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user