提取认证页共享自适应骨架

2026-07-21 11:32:12 +08:00
parent 8f88d6ecdf
commit 40947a1fe5
6 changed files with 134 additions and 120 deletions
@@ -0,0 +1,72 @@
+<template>
+  <view class="auth-shell">
+    <view class="auth-shell__header">
+      <image
+        class="auth-shell__header-image"
+        src="/static/assets/modules/auth/opaque/a01-vnext-header-v1.png"
+        mode="widthFix"
+      />
+      <image
+        class="auth-shell__seal"
+        src="/static/assets/foundation/transparent/brand-seal.png"
+        mode="aspectFit"
+      />
+    </view>
+
+    <view class="auth-shell__paper">
+      <slot />
+    </view>
+
+    <slot name="overlay" />
+  </view>
+</template>
+
+<style scoped lang="scss">
+.auth-shell {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--app-viewport-height);
+  overflow-x: hidden;
+  background: #940400;
+  color: #493323;
+}
+
+.auth-shell__header {
+  position: relative;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(var(--app-safe-top) + min(36.5vw, 175px));
+  overflow: hidden;
+  padding-top: var(--app-safe-top);
+  background: #940400;
+}
+
+.auth-shell__header-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
+}
+
+.auth-shell__seal {
+  position: absolute;
+  top: calc(var(--app-safe-top) + clamp(46px, 11.5vw, 58px));
+  left: 50%;
+  width: clamp(56px, 17vw, 78px);
+  height: clamp(67px, 20.4vw, 94px);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.auth-shell__paper {
+  display: flex;
+  flex: 1;
+  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;
+}
+</style>