UI优化

src/pages/rank-list.vue

@@ -58,7 +58,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
 </script>
 
 <template>
-  <scroll-view class="container" scroll-y @scroll="onScrollView">
+  <view class="container">
     <view
       class="header"
       :style="{
@@ -80,99 +80,108 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
         本赛季排行榜
       </text>
     </view>
-    <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
+    <scroll-view
-    <view class="rank-tabs">
+      scroll-y
-      <view
+      @scroll="onScrollView"
-        v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
+      :style="{ height: myData.userId ? '90vh' : '100vh' }"
-        :key="index"
+    >
-        :style="{
+      <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
-          fontSize: index === selectedIndex ? '16px' : '14px',
+      <view class="rank-tabs">
-          color: index === selectedIndex ? '#000' : '#fff',
+        <view
-          backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
+          v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
-        }"
+          :key="index"
-        @tap="handleSelect(index)"
+          :style="{
-      >
+            fontSize: index === selectedIndex ? '16px' : '14px',
-        {{ rankType }}
+            color: index === selectedIndex ? '#000' : '#fff',
-      </view>
+            backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
-    </view>
+          }"
-    <view class="rank-list">
+          @tap="handleSelect(index)"
-      <view class="rank-list-header">
+        >
-        <text>排名</text>
+          {{ rankType }}
-        <text>用户ID</text>
-        <text>{{ subTitles[selectedIndex] }}</text>
-      </view>
-      <view
-        v-for="(item, index) in currentList"
-        :key="index"
-        class="rank-list-item"
-        :style="{
-          backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
-        }"
-      >
-        <image
-          v-if="index === 0"
-          class="player-bg"
-          src="../static/melee-player-bg1.png"
-          mode="aspectFill"
-        />
-        <image
-          v-if="index === 1"
-          class="player-bg"
-          src="../static/melee-player-bg2.png"
-          mode="aspectFill"
-        />
-        <image
-          v-if="index === 2"
-          class="player-bg"
-          src="../static/melee-player-bg3.png"
-          mode="aspectFill"
-        />
-        <image
-          v-if="index === 0"
-          class="player-crown"
-          src="../static/champ1.png"
-          mode="widthFix"
-        />
-        <image
-          v-if="index === 1"
-          class="player-crown"
-          src="../static/champ2.png"
-          mode="widthFix"
-        />
-        <image
-          v-if="index === 2"
-          class="player-crown"
-          src="../static/champ3.png"
-          mode="widthFix"
-        />
-        <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
-        <Avatar :src="item.avatar" />
-        <view class="rank-item-content">
-          <text class="truncate">{{ item.name }}</text>
-          <text
-            >{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
-          >
         </view>
-        <text class="rank-item-integral" v-if="selectedIndex === 0">
-          <text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-            >{{ item.totalScore }} </text
-          >分
-        </text>
-        <text class="rank-item-integral" v-if="selectedIndex === 1">
-          <text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-            >{{ item.mvpCount }} </text
-          >次
-        </text>
-        <text class="rank-item-integral" v-if="selectedIndex === 2">
-          <text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-            >{{ item.TenRings }} </text
-          >次
-        </text>
       </view>
-      <view v-if="!currentList.length" class="no-data">
+      <view class="rank-list">
-        <text>筹备中...</text>
+        <view class="rank-list-header">
+          <text>排名</text>
+          <text>用户ID</text>
+          <text>{{ subTitles[selectedIndex] }}</text>
+        </view>
+        <view
+          v-for="(item, index) in currentList"
+          :key="index"
+          class="rank-list-item"
+          :style="{
+            backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+          }"
+        >
+          <image
+            v-if="index === 0"
+            class="player-bg"
+            src="../static/melee-player-bg1.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 1"
+            class="player-bg"
+            src="../static/melee-player-bg2.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 2"
+            class="player-bg"
+            src="../static/melee-player-bg3.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 0"
+            class="player-crown"
+            src="../static/champ1.png"
+            mode="widthFix"
+          />
+          <image
+            v-if="index === 1"
+            class="player-crown"
+            src="../static/champ2.png"
+            mode="widthFix"
+          />
+          <image
+            v-if="index === 2"
+            class="player-crown"
+            src="../static/champ3.png"
+            mode="widthFix"
+          />
+          <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
+          <Avatar :src="item.avatar" />
+          <view class="rank-item-content">
+            <text class="truncate">{{ item.name }}</text>
+            <text
+              >{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
+            >
+          </view>
+          <text class="rank-item-integral" v-if="selectedIndex === 0">
+            <text
+              :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+              >{{ item.totalScore }} </text
+            >分
+          </text>
+          <text class="rank-item-integral" v-if="selectedIndex === 1">
+            <text
+              :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+              >{{ item.mvpCount }} </text
+            >次
+          </text>
+          <text class="rank-item-integral" v-if="selectedIndex === 2">
+            <text
+              :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+              >{{ item.TenRings }} </text
+            >次
+          </text>
+        </view>
+        <view v-if="!currentList.length" class="no-data">
+          <text>筹备中...</text>
+        </view>
       </view>
-    </view>
+    </scroll-view>
     <view class="my-rank-data" v-if="myData.userId">
       <image
         src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
@@ -203,14 +212,12 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
         >次</text
       >
     </view>
-  </scroll-view>
+  </view>
 </template>
 
 <style scoped>
 .container {
   width: 100%;
-  height: 100vh;
-  padding-bottom: 100px;
 }
 .header-bg {
   width: 100%;
@@ -323,17 +330,17 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   text-align: right;
 }
 .my-rank-data {
-  position: fixed;
-  bottom: 0;
-  left: 0;
   width: calc(100% - 30px);
   padding: 15px;
-  padding-bottom: 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #fff9;
   font-size: 12px;
+  height: calc(10vh - 30px);
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
 }
 .my-rank-data > image:first-child {
   position: absolute;
@@ -379,6 +386,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   width: 22px;
   height: 22px;
   margin: 0px 15px;
+  margin-top: 5px;
   position: relative;
 }
 .bg-image {

src/theme.json

@@ -9,7 +9,7 @@
     "tabBgColor": "#fcfcfc",
     "tabBorderStyle": "black",
     "tabFontColor": "#1f2937",
-    "tabSelectedColor": "#ff6b00"
+    "tabSelectedColor": "#fcfcfc"
   },
   "dark": {
     "bgColor": "#181818",
@@ -21,6 +21,6 @@
     "tabBgColor": "#181818",
     "tabBorderStyle": "white",
     "tabFontColor": "#f3f4f6",
-    "tabSelectedColor": "#ff6b00"
+    "tabSelectedColor": "#181818"
   }
 }