页面完善

src/pages/rank-list.vue

@@ -11,7 +11,7 @@ const isIos = ref(true);
 const selectedIndex = ref(0);
 const currentList = ref([]);
 const myData = ref(null);
-const headerColor = ref("");
+const addBg = ref("");
 
 onMounted(async () => {
   const deviceInfo = uni.getDeviceInfo();
@@ -38,7 +38,7 @@ const handleSelect = (index) => {
 };
 
 const onScrollView = (e) => {
-  headerColor.value = e.detail.scrollTop > 100 ? "orange" : "";
+  addBg.value = e.detail.scrollTop > 100;
 };
 
 const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
@@ -50,13 +50,20 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
       class="header"
       :style="{
         paddingTop: isIos ? '38px' : '25px',
-        backgroundColor: headerColor,
       }"
     >
+      <image
+        v-if="addBg"
+        class="bg-image"
+        src="../static/app-bg.png"
+        mode="widthFix"
+      />
       <navigator open-type="navigateBack">
-        <image src="../static/back.png" mode="widthFix" />
+        <image class="header-back" src="../static/back.png" mode="widthFix" />
       </navigator>
-      <text :style="{ opacity: headerColor ? 1 : 0 }">本赛季排行榜</text>
+      <text :style="{ opacity: addBg ? 1 : 0, color: '#fff' }">
+        本赛季排行榜
+      </text>
     </view>
     <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
     <view class="rank-tabs">
@@ -178,15 +185,12 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
   top: 0;
   transition: all 0.3s ease;
   z-index: 10;
-}
-.header image {
-  width: 22px;
-  height: 22px;
-  margin: 20px 15px;
+  overflow: hidden;
 }
 .header text {
   transition: all 0.3s ease;
   line-height: 60px;
+  position: relative;
 }
 .rank-tabs {
   width: calc(100% - 20px);
@@ -325,4 +329,17 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
   color: #fff9;
   font-size: 14px;
 }
+.header-back {
+  width: 22px;
+  height: 22px;
+  margin: 20px 15px;
+  position: relative;
+}
+.bg-image {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 </style>