From ad280253b8ebe8416b75ff85081d5cd860605895 Mon Sep 17 00:00:00 2001
From: LinCyJang <linxi957440651@163.com>
Date: Mon, 1 Jun 2026 01:32:02 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=20=E9=9D=9E=E9=81=97=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E4=BC=98=E5=8C=96=EF=BC=8C=E6=B8=90=E8=BF=9B=E5=BC=8F?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=9B=BE=E7=89=87=EF=BC=8C=E4=BD=BF=E5=BE=97?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E6=84=9F=E8=A7=89=E9=A1=B5=E9=9D=A2=E9=A1=BA?=
 =?UTF-8?q?=E7=95=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg_product/views/heritage.vue | 56 ++++++++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/pkg_product/views/heritage.vue b/pkg_product/views/heritage.vue
index 85f7b75..2dce08d 100644
--- a/pkg_product/views/heritage.vue
+++ b/pkg_product/views/heritage.vue
@@ -1,9 +1,28 @@
 <template>
   <view class="pkg-product-heritage">
-    <image style="width: 100%" :src="topImage" mode="widthFix" />
+    <view class="top-image-wrap">
+      <image
+        style="width: 100%"
+        :src="topImage"
+        mode="widthFix"
+        :class="{ loaded: topImageLoaded }"
+        class="top-image"
+        @load="handleTopImageLoad"
+      />
+    </view>
     <view class="main-box" id="main-box">
-      <image style="width: 100%" :src="backgroundImage" mode="widthFix" @load="loadImg" />
+      <view class="bg-image-wrap">
+        <image
+          style="width: 100%"
+          :src="backgroundImage"
+          mode="widthFix"
+          class="bg-image"
+          :class="{ loaded: bgImageLoaded }"
+          @load="loadImg"
+        />
+      </view>
       <view
+        v-if="showItems"
         class="item"
         :style="{ left: item.gx + 'rpx', top: item.gy + 'rpx' }"
         v-for="(item, index) in contents"
@@ -14,6 +33,7 @@
           class="img-item"
           :src="item.image"
           :class="{ unlink: !item.isLink }"
+          lazy-load
         />
         
       </view>
@@ -40,6 +60,9 @@ export default {
       topImage: "",
       backgroundImage: "",
       bgImgWidth: 0,
+      topImageLoaded: false,
+      bgImageLoaded: false,
+      showItems: false,
       pageKeyId: Object.freeze("ichIndex"),
     };
   },
@@ -53,7 +76,14 @@ export default {
     this.queryGuide('ichIndex')
   },
   methods: {
+    handleTopImageLoad() {
+      this.topImageLoaded = true
+    },
     loadImg(e) {
+      this.bgImageLoaded = true
+      this.$nextTick(() => {
+        this.showItems = true
+      })
       this.queryGuide('ichIndex')
     },
     showFunctionGuide() {
@@ -125,6 +155,9 @@ export default {
     },
     init() {
       getICH().then(({ data }) => {
+        this.topImageLoaded = false
+        this.bgImageLoaded = false
+        this.showItems = false
         this.contents = data.contents;
         this.topImage = data.topImage;
         this.backgroundImage = data.backgroundImage;
@@ -178,6 +211,24 @@ export default {
     vertical-align: middle;
   }
 
+  .top-image-wrap,
+  .bg-image-wrap {
+    background: #f6f6f6;
+    overflow: hidden;
+  }
+
+  .top-image,
+  .bg-image {
+    display: block;
+    opacity: 0;
+    transition: opacity .25s ease;
+  }
+
+  .top-image.loaded,
+  .bg-image.loaded {
+    opacity: 1;
+  }
+
   .main-box {
     position: relative;
 
@@ -188,6 +239,7 @@ export default {
       display: flex;
       flex-direction: column;
       align-items: center;
+      will-change: transform;
       .title {
         position: relative;
         width: fit-content;