fix: 修正样式错误

pages/template/scroll-fold-nav/scroll-fold-nav.uvue

-<template>
+<template>
   <scroll-view @scroll="onScroll" class="scroll-view" rebound="false">
-    <!--#ifdef APP-->
-    <view class="height-seat" style="height: 125px;">
-      <!-- 垫高专用 -->
+    <!--#ifdef APP-->
+    <view class="height-seat" style="height: 125px;">
+      <!-- 垫高专用 -->
     </view>
     <!--#endif-->
     <!--#ifdef WEB-->
@@ -10,209 +10,210 @@
       <!-- 垫高专用 -->
     </view>
     <!--#endif-->
-
-    <view class="content">
-      <view class="content-item">
-        <text class="text">1. 当前示例监听了 scroll-view 的 scroll 事件 ，滚动页面实时监听scrollTop。</text>
-        <text class="text">2. 使用 ref 直接获取元素的节点，并在 scroll 事件中通过节点的 setProperty
-          方法来修改搜索导航栏的高度、位置和背景颜色等样式，从而达到滚动折叠的效果。</text>
-        <text class="text">3. 请向上\向下滚动页面观察效果。</text>
-      </view>
-      <view class="content-item" v-for="(item,index) in 20" :key="index">
-        <text class="text">content-{{item}}</text>
-      </view>
-    </view>
-
-    <view ref="top-box" class="top-box">
-      <view ref="scroll-fold-nav" class="scroll-fold-nav">
-        <view class="nav-title">DCloud 为开发者而生</view>
-      </view>
-      <view @click="back" class="nav-back">
-        <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
-      </view>
-      <view ref="search" class="search" @click="toSearchPage">
-        <view class="search-inner">
-          <image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
-          <text class="search-tip-text">请输入你要搜索的内容</text>
-        </view>
-        <text class="search-btn">搜索</text>
-      </view>
-    </view>
-
-  </scroll-view>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        statusBarHeight: 35,
-        scrollTop: 0,
-        searchWidth: 700,
-        searchNode: null as UniElement | null,
-        boxNode: null as UniElement | null,
-        navNode: null as UniElement | null
-      }
-    },
-    onLoad() { },
-    onReady() {
-      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35;
-      this.searchNode = this.$refs['search'] as UniElement;
-      this.boxNode = this.$refs['top-box'] as UniElement;
-      this.navNode = this.$refs['scroll-fold-nav'] as UniElement;
-    },
-    methods: {
-      onScroll(e : ScrollEvent) {
+
+    <view class="content">
+      <view class="content-item">
+        <text class="text">1. 当前示例监听了 scroll-view 的 scroll 事件 ，滚动页面实时监听scrollTop。</text>
+        <text class="text">2. 使用 ref 直接获取元素的节点，并在 scroll 事件中通过节点的 setProperty
+          方法来修改搜索导航栏的高度、位置和背景颜色等样式，从而达到滚动折叠的效果。</text>
+        <text class="text">3. 请向上\向下滚动页面观察效果。</text>
+      </view>
+      <view class="content-item" v-for="(item,index) in 20" :key="index">
+        <text class="text">content-{{item}}</text>
+      </view>
+    </view>
+
+    <view ref="top-box" class="top-box">
+      <view ref="scroll-fold-nav" class="scroll-fold-nav">
+        <view class="nav-title">DCloud 为开发者而生</view>
+      </view>
+      <view @click="back" class="nav-back">
+        <image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
+      </view>
+      <view ref="search" class="search" @click="toSearchPage">
+        <view class="search-inner">
+          <image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
+          <text class="search-tip-text">请输入你要搜索的内容</text>
+        </view>
+        <text class="search-btn">搜索</text>
+      </view>
+    </view>
+
+  </scroll-view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        statusBarHeight: 35,
+        scrollTop: 0,
+        searchWidth: 700,
+        searchNode: null as UniElement | null,
+        boxNode: null as UniElement | null,
+        navNode: null as UniElement | null
+      }
+    },
+    onLoad() { },
+    onReady() {
+      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35;
+      this.searchNode = this.$refs['search'] as UniElement;
+      this.boxNode = this.$refs['top-box'] as UniElement;
+      this.navNode = this.$refs['scroll-fold-nav'] as UniElement;
+    },
+    methods: {
+      onScroll(e : ScrollEvent) {
         let scrollTop = e.detail.scrollTop
         // #ifdef APP
         const originalBoxHeight = 125
         // #else
         const originalBoxHeight = 90
-        // #endif
-        this.boxNode?.style?.setProperty('height', (originalBoxHeight - (scrollTop > 35 ? 35 : scrollTop)) + 'px');
-        this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, ' + (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0 + ')');
-        this.navNode?.style?.setProperty('opacity', 1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0);
-        this.searchNode?.style?.setProperty('width', 700 - (scrollTop > 40 ? 40 : scrollTop) + 'rpx');
-        this.searchNode?.style?.setProperty('top', 0 - (scrollTop > 40 ? 40 : scrollTop) + 'px');
-        this.scrollTop = scrollTop;
-      },
-      back() {
-        // uni.navigateBack()  // 这么写用不了
-        // 这么写可以用
-        uni.navigateBack({
-          success(result) {
-            console.log('navigateBack success', result.errMsg)
-          },
-          fail(error) {
-            console.log('navigateBack fail', error.errMsg)
-          },
-          complete(result) {
-            console.log('navigateBack complete', result.errMsg)
-          },
-        })
-
-        // uni.switchTab({
-        //   url:'/pages/tabBar/template'
-        // })
-
-      },
-      toSearchPage() {
-        uni.showToast({
-          title: '暂不支持',
-          icon: 'none'
-        });
-      }
-    },
-
-  }
-</script>
-
-<style>
-  .page {
-    flex: 1;
-    background-color: #fbdf0d;
-  }
-
-  .scroll-view {
-    flex: 1;
-  }
-
-  .height-seat {
-    height: 110px;
-    /* background-color: #fbdf0d; */
-  }
-
-  .content {
-    padding: 5px 15px;
-    background-color: #f5f5f5;
-  }
-
-  .content-item {
-    padding: 15px;
-    margin: 5px 0;
-    background-color: #fff;
-    border-radius: 5px;
-  }
-
-  .text {
-    font-size: 14px;
-    color: #666;
-    line-height: 20px;
-  }
-
-  .top-box {
-    position: fixed;
-    top: 0;
-    align-items: flex-end;
+        // #endif
+        this.boxNode?.style?.setProperty('height', (originalBoxHeight - (scrollTop > 35 ? 35 : scrollTop)) + 'px');
+        this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, ' + (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0 + ')');
+        this.navNode?.style?.setProperty('opacity', 1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0);
+        this.searchNode?.style?.setProperty('width', 700 - (scrollTop > 40 ? 40 : scrollTop) + 'rpx');
+        this.searchNode?.style?.setProperty('top', 0 - (scrollTop > 40 ? 40 : scrollTop) + 'px');
+        this.scrollTop = scrollTop;
+      },
+      back() {
+        // uni.navigateBack()  // 这么写用不了
+        // 这么写可以用
+        uni.navigateBack({
+          success(result) {
+            console.log('navigateBack success', result.errMsg)
+          },
+          fail(error) {
+            console.log('navigateBack fail', error.errMsg)
+          },
+          complete(result) {
+            console.log('navigateBack complete', result.errMsg)
+          },
+        })
+
+        // uni.switchTab({
+        //   url:'/pages/tabBar/template'
+        // })
+
+      },
+      toSearchPage() {
+        uni.showToast({
+          title: '暂不支持',
+          icon: 'none'
+        });
+      }
+    },
+
+  }
+</script>
+
+<style>
+  .page {
+    flex: 1;
+    background-color: #fbdf0d;
+  }
+
+  .scroll-view {
+    flex: 1;
+  }
+
+  .height-seat {
+    height: 110px;
+    /* background-color: #fbdf0d; */
+  }
+
+  .content {
+    padding: 5px 15px;
+    background-color: #f5f5f5;
+  }
+
+  .content-item {
+    padding: 15px;
+    margin: 5px 0;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+
+  .text {
+    font-size: 14px;
+    color: #666;
+    line-height: 20px;
+  }
+
+  .top-box {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    align-items: flex-end;
     border-bottom: 1px solid #efefef;
-    /* #ifdef APP */
-    height: 125px;
+    /* #ifdef APP */
+    height: 125px;
     padding-top: 35px;
     /* #else */
     height: 90px;
-    /* #endif */
-    background-color: rgba(255, 255, 255, 0);
-    background-color: aliceblue;
-  }
-
-  .scroll-fold-nav {
-    height: 44px;
-    width: 375px;
-    justify-content: center;
-  }
-
-  .nav-title {
-    margin-left: 30px;
-  }
-
-  .nav-back {
+    /* #endif */
+    background-color: rgba(255, 255, 255, 0);
+    background-color: aliceblue;
+  }
+
+  .scroll-fold-nav {
+    height: 44px;
+    width: 375px;
+    justify-content: center;
+  }
+
+  .nav-title {
+    margin-left: 30px;
+  }
+
+  .nav-back {
     position: absolute;
-    /* #ifdef APP */
+    /* #ifdef APP */
     top: 46px;
     /* #else */
     top: 11px;
-    /* #endif */
-    left: 8px;
-  }
-
-  .nav-back .back-img {
-    width: 18px;
-    margin-top: 2px;
-  }
-
-  .search {
-    background-color: #FFFFFF;
-    border: 1px solid #fbdf0d;
-    height: 35px;
-    border-radius: 100px;
-    margin: 0 12px;
-    padding: 8px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 350px;
-    top: 0px;
-  }
-
-  .search-inner {
-    margin-top: 2px;
-    flex-direction: row;
-  }
-
-  .search-inner .search-img {
-    width: 15px;
-  }
-
-  .search-tip-text {
-    font-size: 12px;
-    color: #666;
-  }
-
-  .search-btn {
-    font-size: 12px;
-    background-color: #ff6900;
-    color: #FFF;
-    padding: 5px 8px;
-    border-radius: 100px;
-  }
-</style>
+    /* #endif */
+    left: 8px;
+  }
+
+  .nav-back .back-img {
+    width: 18px;
+    margin-top: 2px;
+  }
+
+  .search {
+    background-color: #FFFFFF;
+    border: 1px solid #fbdf0d;
+    height: 35px;
+    border-radius: 100px;
+    margin: 0 12px;
+    padding: 8px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 350px;
+    top: 0px;
+  }
+
+  .search-inner {
+    margin-top: 2px;
+    flex-direction: row;
+  }
+
+  .search-inner .search-img {
+    width: 15px;
+  }
+
+  .search-tip-text {
+    font-size: 12px;
+    color: #666;
+  }
+
+  .search-btn {
+    font-size: 12px;
+    background-color: #ff6900;
+    color: #FFF;
+    padding: 5px 8px;
+    border-radius: 100px;
+  }
+</style>