diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index ab4a7d7..19e054e 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -258,9 +258,17 @@ > + @@ -388,6 +396,8 @@ const launchProgress = ref(8) const launchLoadingText = ref('正在初始化三维场景') const launchInitialModelSettled = ref(false) const launchOverlayRecoverable = ref(false) +const launchImageLoaded = ref(false) +const launchImageFailed = ref(false) const showRoutePlanner = ref(false) const routeStartPoint = ref(null) const routeEndPoint = ref(null) @@ -535,6 +545,16 @@ const handleLaunchRetry = () => { } } +const handleLaunchImageLoad = () => { + launchImageLoaded.value = true + launchImageFailed.value = false +} + +const handleLaunchImageError = () => { + launchImageLoaded.value = false + launchImageFailed.value = true +} + const handleLaunchContinue = () => { launchOverlayRecoverable.value = false hideLaunchOverlay() @@ -1439,20 +1459,40 @@ const handleExplainBack = () => { height: 100dvh; min-height: 560px; overflow: hidden; - background: #f5f5ed; + background: + radial-gradient(circle at 50% 20%, rgba(224, 225, 0, 0.24), rgba(224, 225, 0, 0) 34%), + linear-gradient(180deg, #f5f5ed 0%, #e1e5d9 42%, #151713 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); } .app-launch-image { position: absolute; inset: 0; + z-index: 0; width: 100%; height: 100%; + transform-origin: center; +} + +.app-launch-image-lqip { + filter: blur(10px); + transform: scale(1.08); +} + +.app-launch-image-full { + opacity: 0; + transform: scale(1.01); + transition: opacity 0.24s ease; +} + +.app-launch-image-full.loaded { + opacity: 1; } .app-launch-shade { position: absolute; inset: 0; + z-index: 1; background: linear-gradient(180deg, rgba(245, 245, 237, 0.92) 0%, rgba(245, 245, 237, 0.62) 24%, rgba(10, 12, 9, 0.08) 52%, rgba(0, 0, 0, 0.56) 100%), linear-gradient(180deg, rgba(224, 225, 0, 0.28) 0, rgba(224, 225, 0, 0) 138px); @@ -1460,6 +1500,7 @@ const handleExplainBack = () => { .app-launch-brand { position: absolute; + z-index: 2; top: calc(env(safe-area-inset-top) + 58px); left: 24px; right: 24px; @@ -1498,6 +1539,7 @@ const handleExplainBack = () => { .app-launch-status { position: absolute; + z-index: 2; left: 24px; right: 24px; bottom: calc(env(safe-area-inset-bottom) + 56px); diff --git a/static/guide/app-launch-loading-lqip.webp b/static/guide/app-launch-loading-lqip.webp new file mode 100644 index 0000000..7b8553a Binary files /dev/null and b/static/guide/app-launch-loading-lqip.webp differ