优化首页加载页弱网图片体验

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);