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

同步封存A06自适应骨架

Browse Source
This commit is contained in:
rain
2026-07-21 12:13:07 +08:00
parent b774ce8212
commit cd3dbb2ab1
2 changed files with 74 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a06-auth-status.vue
+52 -94
View File
@@ -1,18 +1,6 @@
<!-- 页面编号：A-06；用途：只承接账号冻结、停用与风险限制等阻断登录状态。 -->
<template>
<view class="auth-page status-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 status-page">
<view class="status-content">
<view class="page-heading">
<view class="back-button" hover-class="tap-fade" @click="goBack">
@@ -85,42 +73,48 @@
>返回登录</view
>
</view>
</view>
<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/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/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="recovery-action__copy">我知道了</text>
<template #overlay>
<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/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/transparent/a01-scroll-primary-v3.png"
mode="aspectFit"
/>
<text class="recovery-action__copy">我知道了</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</AuthPageShell>
</template>
<script setup>
import { computed, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import AuthPageShell from "@/components/AuthPageShell.vue";
const status = ref("risk");
const recoveryVisible = ref(false);
@@ -203,47 +197,20 @@ const goBack = () => uni.navigateBack();
</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;
}
.status-content {
z-index: 2;
grid-area: 1 / 1;
display: flex;
flex: 1;
flex-direction: column;
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;
@@ -256,8 +223,8 @@ const goBack = () => uni.navigateBack();
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;
}
.back-button__icon {
@@ -266,13 +233,15 @@ const goBack = () => uni.navigateBack();
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;
@@ -280,6 +249,7 @@ const goBack = () => uni.navigateBack();
letter-spacing: 1rpx;
}
.status-divider {
grid-column: 1;
grid-row: 3;
width: 300rpx;
height: 50rpx;
@@ -348,7 +318,7 @@ const goBack = () => uni.navigateBack();
.status-primary {
display: grid;
place-items: center;
min-height: 104rpx;
min-height: var(--app-touch-min);
margin-top: 28rpx;
}
.status-primary__skin,
@@ -368,7 +338,7 @@ const goBack = () => uni.navigateBack();
display: flex;
align-items: center;
justify-content: center;
min-height: 82rpx;
min-height: var(--app-touch-min);
color: #a7160c;
font-size: 24rpx;
}
@@ -388,7 +358,7 @@ const goBack = () => uni.navigateBack();
display: grid;
width: 620rpx;
min-height: 520rpx;
max-height: calc(100vh - 80rpx);
max-height: calc(var(--app-viewport-height) - 40px);
}
.recovery-dialog__skin {
grid-area: 1 / 1;
@@ -444,16 +414,4 @@ const goBack = () => uni.navigateBack();
opacity: 0.72;
}
@media screen and (max-width: 340px) {
.status-content {
padding-right: 48rpx;
padding-left: 48rpx;
}
.page-title {
font-size: 60rpx;
}
.status-detail__label {
flex-basis: 108rpx;
}
}
</style>