feat：优化上线后的改造

pages/home/home.vue

@@ -1,16 +1,17 @@
 <template>
   <view class="home_warp" :class="platformType ? '' : 'iosplatformType'" @scroll="onScroll">
     <!-- 变色搜索栏 -->
-    <view class="header_title_warp" :class="{ 'is-scrolled': isScrolled }" :style="mpHeaderStyle">
-      <view class="language_warp" style="flex: 1; justify-content: flex-start;" @click.stop="jumpSearch">
+    <view class="header_title_warp" :class="{ 'is-scrolled': isScrolled }" :style="headerContainerStyle">
+      <view class="language_warp" style="flex: 1; justify-content: flex-start;" :style="languageBoxStyle"
+        @click.stop="jumpSearch">
         <view :style="isMP ? 'display: flex; align-items: center;margin-top: 0;' : 'margin-top: 0;'">
-          <up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
-            bgColor="#f1f6ff00"></up-image>
+          <up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20" bgColor="#f1f6ff00"
+            :style="searchIconStyle"></up-image>
         </view>
-        <text class="search_msg_warp" :style="isMP ? 'line-height: 1;' : ''">搜索</text>
+        <text class="search_msg_warp" :style="searchMsgStyle">搜索</text>
       </view>
       <view class="message-entry" @click.stop="jumpNewSearch('list')">
-        <image src="https://static.tbmall.xin/static/chart.png" class="chart_img"></image>
+        <image src="https://static.tbmall.xin/static/chart.png" class="chart_img" :style="chartImgStyle"></image>
         <text v-if="kefuUnreadCount > 0" class="message-entry-badge">{{ formatKefuBadge(kefuUnreadCount) }}</text>
       </view>
     </view>
@@ -311,7 +312,7 @@ export default {
     };
   },
   onPageScroll(e) {
-    const top = e ? (e.scrollTop || 0) : 0;
+    const top = this.getScrollTop(e);
     this.scrollTop = top;
     this.isScrolled = top > 10;
   },
@@ -379,10 +380,59 @@ export default {
     if (this.kefuUnreadRefreshTimer) clearTimeout(this.kefuUnreadRefreshTimer);
     this.kefuUnreadRefreshTimer = null;
   },
-  mounted() { },
+  mounted() {
+    // #ifdef H5
+    window.addEventListener("scroll", this.handleWindowScroll, true);
+    const pageBody = document.querySelector("uni-page-body");
+    if (pageBody) {
+      pageBody.addEventListener("scroll", this.handleWindowScroll, true);
+    }
+    // #endif
+  },
+  beforeUnmount() {
+    // #ifdef H5
+    window.removeEventListener("scroll", this.handleWindowScroll, true);
+    const pageBody = document.querySelector("uni-page-body");
+    if (pageBody) {
+      pageBody.removeEventListener("scroll", this.handleWindowScroll, true);
+    }
+    // #endif
+  },
   methods: {
+    getScrollTop(e) {
+      let top = 0;
+      if (typeof e === "number") {
+        top = e;
+      } else if (e && typeof e.scrollTop !== "undefined") {
+        top = e.scrollTop;
+      } else if (e && e.detail && typeof e.detail.scrollTop !== "undefined") {
+        top = e.detail.scrollTop;
+      }
+      // #ifdef H5
+      if (!top) {
+        const pageBody = document.querySelector("uni-page-body");
+        const pageWrapper = document.querySelector("uni-page-wrapper");
+        const homeWarp = document.querySelector(".home_warp");
+        top = Math.max(
+          window.pageYOffset || 0,
+          window.scrollY || 0,
+          document.documentElement?.scrollTop || 0,
+          document.body?.scrollTop || 0,
+          pageBody?.scrollTop || 0,
+          pageWrapper?.scrollTop || 0,
+          homeWarp?.scrollTop || 0
+        );
+      }
+      // #endif
+      return top;
+    },
+    handleWindowScroll(e) {
+      const top = this.getScrollTop(e);
+      this.scrollTop = top;
+      this.isScrolled = top > 10;
+    },
     onScroll(e) {
-      const top = e.detail ? e.detail.scrollTop : (e.target ? e.target.scrollTop : 0);
+      const top = this.getScrollTop(e);
       this.scrollTop = top;
       this.isScrolled = top > 10;
     },
@@ -846,6 +896,55 @@ export default {
     isBlockedDate() {
       return useTabber(10);
     },
+    headerContainerStyle() {
+      const base = this.mpHeaderStyle || {};
+      if (this.isScrolled) {
+        return {
+          ...base,
+          backgroundColor: '#ffffff',
+          boxShadow: '0 4rpx 16rpx rgba(0, 0, 0, 0.08)',
+        };
+      }
+      return {
+        ...base,
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+      };
+    },
+    languageBoxStyle() {
+      const base = this.isMP ? { height: this.mpLanguageStyle?.height, boxSizing: 'border-box' } : {};
+      if (this.isScrolled) {
+        return {
+          ...base,
+          backgroundColor: '#f4f5f8',
+          borderColor: '#e8e8e8',
+        };
+      }
+      return {
+        ...base,
+        backgroundColor: 'rgba(255, 255, 255, 0.35)',
+        borderColor: 'rgba(255, 255, 255, 0.4)',
+      };
+    },
+    searchMsgStyle() {
+      const base = this.isMP ? { lineHeight: '1' } : {};
+      if (this.isScrolled) {
+        return { ...base, color: '#888888' };
+      }
+      return { ...base, color: 'rgba(255, 255, 255, 0.95)' };
+    },
+    searchIconStyle() {
+      if (this.isScrolled) {
+        return { filter: 'brightness(0.3)' };
+      }
+      return { filter: 'none' };
+    },
+    chartImgStyle() {
+      if (this.isScrolled) {
+        return { filter: 'brightness(0.2)' };
+      }
+      return { filter: 'none' };
+    },
   },
 };
 </script>
@@ -856,6 +955,9 @@ export default {
   min-height: 100vh;
   position: relative;
   box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 
   &.iosplatformType {
     min-height: 100vh;
@@ -980,10 +1082,13 @@ export default {
 }
 
 .home_content_z_warp {
-  position: absolute;
+  position: relative;
   left: 0;
   top: 0;
   width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 .logo_banner {