From 2c4028433f68cfbfbd4fb162842c5bdc03ea1d13 Mon Sep 17 00:00:00 2001
From: lyf <2514544224@qq.com>
Date: Thu, 9 Jul 2026 16:25:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A6=96=E9=A1=B5=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E9=A1=B5=E5=BC=B1=E7=BD=91=E5=9B=BE=E7=89=87=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue                 |  46 +++++++++++++++++++++-
 static/guide/app-launch-loading-lqip.webp | Bin 0 -> 344 bytes
 2 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 static/guide/app-launch-loading-lqip.webp

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 @@
     >
       <view class="app-launch-stage">
         <image
-          class="app-launch-image"
+          class="app-launch-image app-launch-image-lqip"
+          src="/static/guide/app-launch-loading-lqip.webp"
+          mode="aspectFill"
+        />
+        <image
+          class="app-launch-image app-launch-image-full"
+          :class="{ loaded: launchImageLoaded && !launchImageFailed }"
           src="/static/guide/app-launch-loading.webp"
           mode="aspectFill"
+          @load="handleLaunchImageLoad"
+          @error="handleLaunchImageError"
         />
         <view class="app-launch-shade"></view>
         <view class="app-launch-brand">
@@ -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<RoutePointOption | null>(null)
 const routeEndPoint = ref<RoutePointOption | null>(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 0000000000000000000000000000000000000000..7b8553adeedbd39b56f17ff7279473596032b986
GIT binary patch
literal 344
zcmV-e0jK^_Nk&Fc0RRA3MM6+kP&gn&0RRB-3;>-0DnI~o06!gorb?%!FsUyVY2p|o
ziRl2#<5SwESx#(c6R~BGdkhBd);wH}GBIiM+E_o2I*OYjC1u*@&#-5Z#(`#oH?oMu
zY@f&&k$qIB;3C(uFzkd67D1Ut5+&y`L~kyiVK_wB5?jCk{_dGU@E<p&f%bzfMfwvM
z>16Wk0^IY~78l$@`oyuqkD(Xi2I2!gPzH{2cV+2Sit>XTv!#5}3}f}3nWJ0e2aKS?
zS4B;dRpjm4Hl$tVg)+H6%=2xab>|frjEn)yUNI0)!1pt4bj$j-qD82KZ@78OJ*7ok
zH6|@PDD}`@hcC*C)3<uouqo<5v5V1lG%cttlrzk){Ff+kbl9gP>b5bu{gd!kYJV!M
qBZ@PEI}Uq5SqscyO(aPV<fY#z6_#LndUo?xTg)1|KDZ06c@_XCC7%ZX

literal 0
HcmV?d00001