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

视觉审核完成30%

Browse Source
This commit is contained in:
rain
2026-07-16 18:12:59 +08:00
parent cb25317412
commit 23cfd365a1
89 changed files with 3740 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a01-entry.vue
+20 -28
View File
@@ -8,7 +8,7 @@
<view class="login-content">
<view class="login-heading">
<text class="login-title">登录家谱</text>
<image class="title-divider" src="/static/assets/modules/auth/opaque/a01-title-divider-v2.png" mode="scaleToFill" />
<image class="title-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
</view>
<view class="login-tabs">
@@ -42,7 +42,7 @@
</view>
<view class="login-submit" hover-class="button-pressed" @click="submitLogin">
<image class="button-skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<image class="button-skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
<text class="login-submit__copy">登录</text>
</view>
@@ -55,7 +55,7 @@
</view>
<view class="wechat-login" hover-class="button-pressed" @click="prepareWechatLogin">
<image class="button-skin" src="/static/assets/foundation/opaque/a01-secondary-button.png" mode="scaleToFill" />
<image class="button-skin" src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png" mode="aspectFit" />
<view class="wechat-login__content">
<image class="wechat-icon" src="/static/assets/foundation/transparent/auth-wechat.png" mode="aspectFit" />
<text>微信登录</text>
@@ -85,7 +85,7 @@
<!-- 当前只验收自定义容器外观，真实行为验证数据留到接口阶段接入。 -->
<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" />
<image class="verification-dialog__skin" src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
<view class="verification-dialog__content">
<text class="verification-title">安全验证</text>
<text class="verification-copy">{{ verificationPurpose }}前需要完成行为验证</text>
@@ -99,7 +99,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>
@@ -248,8 +247,8 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
z-index: 1;
top: 64rpx;
left: 50%;
width: 220rpx;
height: 264rpx;
width: 184rpx;
height: 221rpx;
transform: translateX(-50%);
pointer-events: none;
}
@@ -263,16 +262,15 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
}
.login-heading {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 118rpx;
height: 142rpx;
}
.login-title {
color: #9f170f;
font-family: STSong, SimSun, serif;
font-size: 82rpx;
font-weight: 700;
letter-spacing: 8rpx;
@@ -280,12 +278,10 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
}
.title-divider {
position: absolute;
bottom: -4rpx;
left: 50%;
width: 286rpx;
height: 32rpx;
transform: translateX(-50%);
flex: none;
width: 360rpx;
height: 60rpx;
filter: brightness(0.68) saturate(1.5) contrast(1.2);
}
.login-tabs {
@@ -303,7 +299,6 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
justify-content: center;
min-height: 88rpx;
color: #80684f;
font-family: STSong, SimSun, serif;
font-size: 40rpx;
letter-spacing: 2rpx;
}
@@ -430,7 +425,6 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
position: relative;
z-index: 1;
color: #fffaf1;
font-family: STSong, SimSun, serif;
font-size: 52rpx;
letter-spacing: 8rpx;
}
@@ -440,7 +434,6 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
align-items: center;
height: 100rpx;
color: #9f6a27;
font-family: STSong, SimSun, serif;
font-size: 32rpx;
white-space: nowrap;
}
@@ -466,7 +459,6 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
.wechat-login {
height: 100rpx;
color: #493323;
font-family: STSong, SimSun, serif;
font-size: 40rpx;
letter-spacing: 3rpx;
}
@@ -563,18 +555,19 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
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__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.feedback-toast__copy {
position: relative;
z-index: 1;
@@ -621,7 +614,6 @@ const prepareAgreement = () => showFeedback('协议页面准备中')
.verification-title {
color: #6f140f;
font-family: STSong, SimSun, serif;
font-size: 42rpx;
font-weight: 700;
}
pages/auth/a04-register.vue
+17 -101
View File
@@ -12,7 +12,7 @@
</view>
<text class="page-title">注册账号</text>
<text class="page-subtitle">创建属于你的家谱账号</text>
<image class="register-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
<image class="register-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
</view>
<view class="form-content">
@@ -42,7 +42,7 @@
</view>
<view class="register-submit" hover-class="button-hover" @click="submitRegister">
<image class="register-submit__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<image class="register-submit__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
<text class="register-submit__content">注册账号</text>
</view>
@@ -66,24 +66,7 @@
</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="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>
@@ -103,7 +86,6 @@ const fieldErrors = ref({
password: '',
confirmPassword: ''
})
const verificationVisible = ref(false)
const feedbackVisible = ref(false)
const feedbackMessage = ref('')
let feedbackTimer = null
@@ -150,20 +132,12 @@ const validateForm = () => {
return !Object.values(nextErrors).some(Boolean)
}
const closeVerification = () => {
verificationVisible.value = false
}
const confirmVerification = () => {
closeVerification()
showFeedback('注册服务待接入')
}
const submitRegister = () => {
const formValid = validateForm()
if (!agreed.value) agreementError.value = true
if (!formValid || !agreed.value) return
verificationVisible.value = true
// 真实滑动验证由接口阶段的组件自带样式接管，本页不保留自定义假面板。
showFeedback('滑动验证待接口接入')
}
</script>
@@ -200,8 +174,8 @@ const submitRegister = () => {
z-index: 1;
top: 64rpx;
left: 50%;
width: 220rpx;
height: 264rpx;
width: 184rpx;
height: 221rpx;
transform: translateX(-50%);
pointer-events: none;
}
@@ -240,7 +214,6 @@ const submitRegister = () => {
.page-title {
color: #9f170f;
font-family: STSong, SimSun, serif;
font-size: 66rpx;
font-weight: 700;
letter-spacing: 7rpx;
@@ -254,9 +227,9 @@ const submitRegister = () => {
}
.register-divider {
width: 154rpx;
height: 34rpx;
margin-top: 10rpx;
width: 300rpx;
height: 50rpx;
filter: brightness(0.68) saturate(1.5) contrast(1.2);
}
.form-content { margin-top: 12rpx; }
@@ -273,7 +246,6 @@ const submitRegister = () => {
.input-label {
flex: 0 0 152rpx;
color: #674b35;
font-family: STSong, SimSun, serif;
font-size: 31rpx;
}
@@ -319,7 +291,6 @@ const submitRegister = () => {
position: relative;
z-index: 1;
color: #fffaf0;
font-family: STSong, SimSun, serif;
font-size: 39rpx;
letter-spacing: 6rpx;
}
@@ -388,19 +359,19 @@ const submitRegister = () => {
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__skin,
.verification-dialog__skin {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.feedback-toast__copy {
position: relative;
z-index: 1;
@@ -410,59 +381,4 @@ const submitRegister = () => {
text-align: center;
}
.verification-layer {
position: fixed;
z-index: 40;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
background: rgba(31, 20, 13, 0.56);
}
.verification-dialog {
position: relative;
width: 620rpx;
height: 520rpx;
}
.verification-dialog__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
height: 100%;
padding: 90rpx 64rpx 54rpx;
}
.verification-title {
color: #6f140f;
font-family: STSong, SimSun, serif;
font-size: 42rpx;
font-weight: 700;
}
.verification-copy { margin-top: 42rpx; color: #493323; font-size: 28rpx; }
.verification-note { margin-top: 20rpx; color: #8d7a68; font-size: 23rpx; }
.verification-actions {
display: flex;
width: 100%;
margin-top: auto;
}
.verification-action {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
min-height: 88rpx;
color: #745b46;
font-size: 28rpx;
}
.verification-action--primary { color: #a9160d; font-weight: 700; }
</style>
pages/auth/a05-reset-password.vue
+20 -60
View File
@@ -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; }
pages/auth/a06-auth-status.vue
+16 -16
View File
@@ -12,7 +12,7 @@
</view>
<text class="page-title">登录受限</text>
<text class="page-subtitle">请根据当前账号状态完成恢复</text>
<image class="status-divider" src="/static/assets/foundation/transparent/auth-divider-knot.png" mode="aspectFit" />
<image class="status-divider" src="/static/assets/modules/auth/transparent/a01-vnext-divider-v1.png" mode="aspectFit" />
</view>
<view class="status-body">
@@ -38,7 +38,7 @@
</view>
<view class="status-primary" hover-class="button-hover" @click="openRecovery">
<image class="status-primary__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<image class="status-primary__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
<text class="status-primary__copy">查看恢复方式</text>
</view>
<view class="status-secondary" hover-class="tap-fade" @click="goLogin">返回登录</view>
@@ -47,13 +47,13 @@
<view v-if="recoveryVisible" class="recovery-layer" @click="closeRecovery">
<view class="recovery-dialog" @click.stop>
<image class="recovery-dialog__skin" src="/static/assets/modules/auth/opaque/a02-login-panel.png" mode="scaleToFill" />
<image class="recovery-dialog__skin" src="/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png" mode="aspectFit" />
<view class="recovery-dialog__content">
<text class="recovery-title">{{ currentState.recoveryTitle }}</text>
<text class="recovery-copy">{{ currentState.recoveryDetail }}</text>
<text class="recovery-note">账号恢复服务将在功能阶段接入，当前仅审核页面样式与状态位置。</text>
<view class="recovery-action" hover-class="button-hover" @click="closeRecovery">
<image class="recovery-action__skin" src="/static/assets/foundation/opaque/a01-primary-button.png" mode="scaleToFill" />
<image class="recovery-action__skin" src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png" mode="aspectFit" />
<text class="recovery-action__copy">我知道了</text>
</view>
</view>
@@ -150,19 +150,19 @@ const goBack = () => uni.navigateBack()
.page-canvas { position: relative; box-sizing: border-box; width: 100%; min-height: calc(1665rpx + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.page-backdrop { position: absolute; inset: 0 0 auto; width: 100%; height: 1665rpx; pointer-events: none; }
.brand-seal { position: absolute; z-index: 1; top: 64rpx; left: 50%; width: 220rpx; height: 264rpx; transform: translateX(-50%); pointer-events: none; }
.brand-seal { position: absolute; z-index: 1; top: 64rpx; left: 50%; width: 184rpx; height: 221rpx; transform: translateX(-50%); pointer-events: none; }
.status-content { position: relative; z-index: 2; box-sizing: border-box; padding: 430rpx 64rpx 46rpx; }
.page-heading { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 154rpx; }
.back-button { position: absolute; top: 10rpx; left: 0; display: flex; align-items: center; justify-content: center; width: 88rpx; height: 88rpx; }
.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; }
.status-divider { width: 154rpx; height: 34rpx; margin-top: 10rpx; }
.status-divider { width: 300rpx; height: 50rpx; margin-top: 2rpx; filter: brightness(0.68) saturate(1.5) contrast(1.2); }
.status-body { display: flex; flex-direction: column; align-items: center; padding-top: 6rpx; text-align: center; }
.status-icon { width: 94rpx; height: 94rpx; opacity: 0.82; }
.status-eyebrow { margin-top: 10rpx; color: #a7160c; font-size: 22rpx; letter-spacing: 3rpx; }
.status-title { margin-top: 10rpx; color: #3f2c1d; font-family: STSong, SimSun, serif; font-size: 40rpx; font-weight: 700; letter-spacing: 3rpx; }
.status-title { margin-top: 10rpx; color: #3f2c1d; font-size: 40rpx; font-weight: 700; letter-spacing: 3rpx; }
.status-description { box-sizing: border-box; width: 100%; margin-top: 12rpx; color: #786654; font-size: 24rpx; line-height: 1.65; }
.status-details { width: 100%; margin-top: 22rpx; border-top: 1rpx solid #cfaa70; }
.status-detail { display: flex; box-sizing: border-box; min-height: 78rpx; padding: 16rpx 0; border-bottom: 1rpx solid rgba(207, 170, 112, 0.72); text-align: left; }
@@ -172,18 +172,18 @@ const goBack = () => uni.navigateBack()
.status-primary { position: relative; display: flex; align-items: center; justify-content: center; height: 104rpx; margin-top: 28rpx; overflow: hidden; }
.status-primary__skin,
.recovery-action__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
.status-primary__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 34rpx; letter-spacing: 5rpx; }
.status-primary__copy { position: relative; z-index: 1; color: #fffaf0; font-size: 38rpx; letter-spacing: 5rpx; }
.status-secondary { display: flex; align-items: center; justify-content: center; min-height: 82rpx; color: #a7160c; font-size: 24rpx; }
.recovery-layer { position: fixed; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 42rpx; background: rgba(35, 18, 10, 0.62); }
.recovery-dialog { position: relative; width: 100%; max-width: 670rpx; min-height: 560rpx; }
.recovery-dialog { position: relative; width: 620rpx; height: 520rpx; }
.recovery-dialog__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
.recovery-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 560rpx; padding: 92rpx 70rpx 64rpx; text-align: center; }
.recovery-title { color: #8f160f; font-family: STSong, SimSun, serif; font-size: 43rpx; font-weight: 700; letter-spacing: 4rpx; }
.recovery-copy { margin-top: 32rpx; color: #513a28; font-size: 27rpx; line-height: 43rpx; }
.recovery-note { margin-top: 18rpx; color: #8d7965; font-size: 21rpx; line-height: 34rpx; }
.recovery-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 92rpx; margin-top: 38rpx; overflow: hidden; }
.recovery-action__copy { position: relative; z-index: 1; color: #fffaf0; font-family: STSong, SimSun, serif; font-size: 30rpx; letter-spacing: 4rpx; }
.recovery-dialog__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; height: 100%; padding: 58rpx 58rpx 36rpx; text-align: center; }
.recovery-title { color: #8f160f; font-size: 42rpx; font-weight: 700; letter-spacing: 4rpx; }
.recovery-copy { margin-top: 20rpx; color: #513a28; font-size: 26rpx; line-height: 40rpx; }
.recovery-note { margin-top: 12rpx; color: #8d7965; font-size: 20rpx; line-height: 31rpx; }
.recovery-action { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 80rpx; margin-top: 22rpx; overflow: hidden; }
.recovery-action__copy { position: relative; z-index: 1; color: #fffaf0; font-size: 29rpx; letter-spacing: 4rpx; }
.tap-fade,
.button-hover { opacity: 0.72; }
pages/genealogy/g01-my-genealogies.vue
+1
View File
@@ -630,6 +630,7 @@ const openShortcut = (key) => {
box-sizing: border-box;
padding: 22rpx 26rpx;
}
.application-record + .application-record { margin-top: 12rpx; }
.application-record__skin { position: absolute; inset: 0; width: 100%; height: 100%; }
.application-record__main { position: relative; z-index: 1; min-width: 0; flex: 1; }
.application-record__title-row { display: flex; align-items: center; justify-content: space-between; }