fix: 邀请页面样式修改

src/pages.json

@@ -210,6 +210,7 @@
       "path": "pages/referEarn/referEarn",
       "type": "page",
       "layout": "default",
+      "needLogin": true,
       "style": {
         "navigationStyle": "custom"
       }

src/pages/referEarn/referEarn.vue

@@ -1,6 +1,7 @@
 <route lang="json5" type="page">
 {
   layout: 'default',
+  needLogin: true,
   style: {
     navigationStyle: 'custom',
   },
@@ -25,7 +26,18 @@ defineOptions({
 const paging = ref(null)
 // 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
 useZPaging(paging)
+const changeNavbarThreshold = 100 // 滚动到这个高度时改变导航栏颜色
 
+const navBgColor = ref('transparent')
+onPageScroll((e) => {
+  // 根据滚动高度改变导航栏背景色
+  if (e.scrollTop > changeNavbarThreshold) {
+    navBgColor.value = '#ffffff'
+  }
+  else {
+    navBgColor.value = 'transparent'
+  }
+})
 // 搜索结果
 const dataList = ref([])
 async function queryList(pageNo: number, pageSize: number) {
@@ -60,12 +72,12 @@ onLoad(() => {
 </script>
 
 <template>
-  <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false" fixed>
+  <wd-navbar :custom-style="`background: ${navBgColor}`" safe-area-inset-top :bordered="false" fixed>
     <template #left>
-      <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="() => goBack()" />
+      <wd-icon name="thin-arrow-left" :color="navBgColor === '#ffffff' ? '#000000' : '#ffffff'" size="32rpx" @click="() => goBack()" />
     </template>
     <template #title>
-      <view class="text-white font-bold text-32rpx!">
+      <view class="font-bold text-32rpx!" :style="{ color: navBgColor === '#ffffff' ? '#000000' : '#ffffff' }">
         {{ $t('referEarn.title') }}
       </view>
     </template>