diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..b03bab1
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,269 @@
+# AI Agent 企业级行为策略（Ultimate Edition）
+
+## 核心目标
+
+AI 应：
+
+* 像高级工程师一样思考
+* 保持智能
+* 保持上下文理解能力
+* 保持组件联动能力
+* 同时避免无意义 token 消耗
+
+目标不是限制 AI。
+
+目标是：
+
+* 智能
+* 克制
+* 稳定
+* 高效
+
+---
+
+# AI 工作模式
+
+默认采用：
+
+Think First
+Explore Second
+Modify Last
+
+即：
+
+1. 先理解需求
+2. 再推理可能相关文件
+3. 再最小化读取
+4. 最后修改代码
+
+禁止：
+
+* 无脑全项目扫描
+* 不经思考直接 grep
+* 无限递归读取
+
+---
+
+# 智能按需扫描（核心规则）
+
+允许 AI 自动：
+
+* 分析当前任务
+* 分析 import
+* 分析组件依赖
+* 分析 store 依赖
+* 分析 api 依赖
+* 分析 types 依赖
+* 分析 utils 依赖
+
+允许：
+
+* 自动读取直接依赖文件
+* 自动修复 import
+* 自动修复类型引用
+* 自动分析运行链路
+
+但必须：
+
+* 最小化扫描范围
+* 最小化 token 消耗
+* 禁止无限递归探索
+
+---
+
+# 扫描深度限制
+
+默认最大依赖深度：
+
+2 层
+
+例如：
+
+index.vue
+-> ProductCard.vue
+-> product.ts
+
+允许读取：
+
+* ProductCard.vue
+* product.ts
+
+禁止继续无限扫描。
+
+如果任务复杂：
+
+必须先输出分析计划，
+等待确认后再扩大扫描范围。
+
+---
+
+# AI 自由发挥边界
+
+允许：
+
+* 合理重构
+* 合理组件化
+* 合理优化结构
+* 合理优化样式
+* 合理优化复用
+* 合理修复低级问题
+* 合理修复 import
+* 合理修复类型错误
+
+禁止：
+
+* 为了炫技重构项目
+* 无意义抽象
+* 过度设计
+* 无意义拆分
+* 无意义新增依赖
+* 自动升级依赖
+
+---
+
+# Token 经济策略
+
+Token 应优先用于：
+
+* 推理
+* 架构理解
+* 业务逻辑
+* UI 结构优化
+* 类型安全
+* 组件联动
+
+禁止浪费在：
+
+* 全项目 grep
+* 重复读取
+* 重复输出
+* 重复解释
+* 输出完整项目
+* 输出未修改代码
+
+---
+
+# 页面生成规则（Figma / uni-app）
+
+允许：
+
+* 自动组件化
+* 自动布局优化
+* 自动结构优化
+* 自动提取公共组件
+
+优先：
+
+* flex 布局
+* 可维护性
+* uni-app 最佳实践
+* 低嵌套结构
+* 高复用结构
+
+禁止：
+
+* div 套 div
+* 全 absolute 页面
+* 垃圾 HTML
+* 无意义嵌套
+* 内联 style 泛滥
+
+---
+
+# uni-app 规则
+
+必须：
+
+* 使用 view/text/image
+* px 转 rpx
+* 使用 script setup
+* scoped scss
+* 兼容：
+
+  * H5
+  * 微信小程序
+  * App
+
+---
+
+# 大任务策略
+
+复杂任务：
+
+必须：
+
+1. 先分析
+2. 先规划
+3. 先输出方案
+4. 等待确认
+
+再：
+
+5. 编码
+
+禁止直接进入大规模代码生成。
+
+---
+
+# 修改策略
+
+优先：
+
+* diff 修改
+* 小范围 patch
+* 保持现有架构
+* 保持现有组件体系
+* 保持现有 API 结构
+
+允许：
+
+* 小范围智能优化
+
+禁止：
+
+* 全项目重构
+* 无关文件修改
+
+---
+
+# 高级工程师行为模式
+
+AI 应像高级工程师：
+
+* 先思考
+* 再探索
+* 再修改
+
+而不是：
+
+* 无脑扫描器
+* Token 消耗机器
+* 低级代码生成器
+
+AI 应主动：
+
+* 控制扫描范围
+* 控制输出长度
+* 控制修改范围
+* 控制复杂度
+
+同时保持：
+
+* 智能
+* 联动能力
+* 架构理解能力
+
+---
+
+# 默认输出规则
+
+默认：
+
+* 仅输出修改部分
+* 不重复未修改代码
+* 少解释
+* 优先 patch
+* 优先 diff
+
+除非用户明确要求：
+否则不要输出完整项目。
diff --git a/src/apis.js b/src/apis.js
index 1907015..0259878 100644
--- a/src/apis.js
+++ b/src/apis.js
@@ -6,8 +6,8 @@ try {
 
     switch (envVersion) {
         case "develop": // 开发版
-            BASE_URL = "http://localhost:8000/api/shoot";
-            // BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
+            // BASE_URL = "http://localhost:8000/api/shoot";
+            BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
             break;
         case "trial": // 体验版
             BASE_URL = "https://apitest.shelingxingqiu.com/api/shoot";
@@ -496,3 +496,63 @@ export const kickPlayerAPI = (number, userId) => {
         userId,
     });
 };
+
+// 获取赛季列表
+export const getSeasonList = () => {
+    return request("GET", "/index/season/list");
+};
+
+// 获取赛季统计
+export const getSeasonStats = (seasonId) => {
+    const data = {};
+    if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
+    return request("GET", "/index/season/stats", data);
+};
+
+//获取积分榜
+export const getScoreRankList = (seasonId, page, perPage) => {
+    return request("GET", "/index/score/rank/list", {
+		seasonId,
+		page,
+		perPage
+	});
+};
+
+// 获取10环排行榜
+export const getTenRingRankList = (seasonId, page, perPage) => {
+    return request("GET", "/index/tenRing/rank/list", {
+		seasonId,
+		page,
+		perPage
+	});
+};
+
+// 获取MVP排行榜
+export const getMvpRankList = (seasonId, page, perPage) => {
+    return request("GET", "/index/mvp/rank/list", {
+		seasonId,
+		page,
+		perPage
+	});
+};
+
+// 获取我的积分排名
+export const getMyScoreRank = (seasonId) => {
+    const data = {};
+    if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
+    return request("GET", "/index/myScoreRank", data);
+};
+
+// 获取我的MVP排名
+export const getMyMvpRank = (seasonId) => {
+    const data = {};
+    if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
+    return request("GET", "/index/myMvpRank", data);
+};
+
+// 获取我的10环排名
+export const getMyTenRingRank = (seasonId) => {
+    const data = {};
+    if (seasonId !== undefined && seasonId !== null) data.seasonId = seasonId;
+    return request("GET", "/index/myTenRingRank", data);
+};
diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index ae678c3..134b66e 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -18,31 +18,31 @@ const props = defineProps({
     <image
       class="bg-image"
       v-if="type === 0"
-      src="../static/app-bg.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
       mode="widthFix"
     />
     <image
       class="bg-image"
       v-if="type === 1"
-      src="../static/app-bg2.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg2.png"
       mode="widthFix"
     />
     <image
       class="bg-image"
       v-if="type === 2"
-      src="../static/app-bg3.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg3.png"
       :style="{ height: capsuleHeight + 50 + 'px' }"
     />
     <image
       class="bg-image"
       v-if="type === 3"
-      src="../static/app-bg4.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg4.png"
       mode="widthFix"
     />
     <image
       class="bg-image"
       v-if="type === 4"
-      src="../static/app-bg5.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
       mode="widthFix"
     />
     <image
@@ -51,6 +51,12 @@ const props = defineProps({
       src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
       mode="widthFix"
     />
+	<image
+	  class="bg-image"
+	  v-if="type === 6"
+	  src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
+	  mode="widthFix"
+	/>
     <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
@@ -67,7 +73,7 @@ const props = defineProps({
 
 .bg-image {
   width: 100%;
-  height: 100%;
+  /* height: 100%; */
 }
 
 .bg-overlay {
diff --git a/src/pages/device-intro.vue b/src/pages/device-intro.vue
index 01f4e51..2af5013 100644
--- a/src/pages/device-intro.vue
+++ b/src/pages/device-intro.vue
@@ -33,7 +33,7 @@ const onScrollView = (e) => {
     >
       <image
         :style="{ opacity: addBg ? 1 : 0 }"
-        src="../static/app-bg.png"
+        src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
         mode="widthFix"
       />
       <navigator open-type="navigateBack">
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c670356..72944f5 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -13,7 +13,7 @@ import {
   getDeviceBatteryAPI,
   getHomeData,
   getMyDevicesAPI,
-  getRankListAPI,
+  getScoreRankList,
   silentLoginAPI,
 } from "@/apis";
 import {topThreeColors} from "@/constants";
@@ -26,15 +26,23 @@ const {
   updateConfig,
   updateUser,
   updateDevice,
-  updateRank,
   getLvlName,
   getLvlNameByScore,
   updateOnline,
 } = store;
-const {user, device, rankData, online, game} = storeToRefs(store);
+const {user, device, online, game} = storeToRefs(store);
 
 const showModal = ref(false);
 const showGuide = ref(false);
+const scoreRankList = ref([]);
+
+// 提取积分榜接口返回的榜单数组，兼容数组和对象两种返回格式。
+const getScoreRankData = (result) => {
+  if (Array.isArray(result)) return result;
+  if (Array.isArray(result?.list)) return result.list;
+  if (Array.isArray(result?.items)) return result.items;
+  return [];
+};
 
 const toPage = async (path) => {
   if (!user.value.id) {
@@ -84,15 +92,15 @@ onShow(async () => {
     }
   }
 
-  const promises = [getRankListAPI()];
+  const promises = [getScoreRankList(undefined, 1, 10)];
   if (token || user.value.id) {
     promises.push(getHomeData());
   }
 
   const [rankList, homeData] = await Promise.all(promises);
 
-  console.log("排行数据", rankList);
-  updateRank(rankList);
+  console.log("积分榜数据", rankList);
+  scoreRankList.value = getScoreRankData(rankList).slice(0, 10);
 
   if (homeData) {
     console.log("首页数据：", homeData);
@@ -216,7 +224,7 @@ onShareTimeline(() => {
                   class="player-avatar"
                   :style="{
                   zIndex: 8 - i,
-                  borderColor: rankData.rank[i - 1]
+                  borderColor: scoreRankList[i - 1]
                     ? topThreeColors[i - 1] || '#000'
                     : '#000',
                 }"
@@ -227,15 +235,15 @@ onShareTimeline(() => {
                 <view v-if="i > 3">{{ i }}</view>
                 <image
                     :src="
-                    rankData.rank[i - 1]
-                      ? rankData.rank[i - 1].avatar
+                    scoreRankList[i - 1]
+                      ? (scoreRankList[i - 1].avatar || '../static/user-icon.png')
                       : '../static/user-icon-dark.png'
                   "
                     mode="aspectFill"
                 />
               </view>
               <view class="more-players">
-                <text>{{ rankData.rank.length }}</text>
+                <text>{{ scoreRankList.length }}</text>
               </view>
             </view>
           </view>
diff --git a/src/pages/point-book-detail-share.vue b/src/pages/point-book-detail-share.vue
index 1283484..e03eb1d 100644
--- a/src/pages/point-book-detail-share.vue
+++ b/src/pages/point-book-detail-share.vue
@@ -107,7 +107,7 @@ const targetTypeName = computed(() => {
 <template>
   <view class="container" :style="{ paddingTop: paddingTop + 'px' }">
     <image
-      src="../static/app-bg5.png"
+      src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
       class="bg-image"
       mode="aspectFill"
       :style="{ height: paddingTop + 60 + 'px' }"
diff --git a/src/pages/practise-two.vue b/src/pages/practise-two.vue
index 601e71f..6146b7c 100644
--- a/src/pages/practise-two.vue
+++ b/src/pages/practise-two.vue
@@ -89,7 +89,7 @@ async function onComplete() {
     practiseResult.value = {};
     start.value = false;
     scores.value = [];
-    const result = await createPractiseAPI(total, 360);
+    const result = await createPractiseAPI(total, 3600);
     if (result) practiseId.value = result.id;
   }
 }
@@ -105,7 +105,7 @@ onMounted(async () => {
   });
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("share-image", onClickShare);
-  const result = await createPractiseAPI(total, 360, targetType.value);
+  const result = await createPractiseAPI(total, 3600, targetType.value);
   if (result) practiseId.value = result.id;
 });
 
@@ -132,7 +132,7 @@ onBeforeUnmount(() => {
         <ShootProgress
           :tips="`请连续射${total}支箭`"
           :start="start"
-          :total="360"
+          :total="3600"
           :onStop="onOver"
         />
         <view class="user-row">
diff --git a/src/pages/rank-list.vue b/src/pages/rank-list.vue
index 286c9a5..3963ca5 100644
--- a/src/pages/rank-list.vue
+++ b/src/pages/rank-list.vue
@@ -1,58 +1,333 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { computed, nextTick, onMounted, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
 import Avatar from "@/components/Avatar.vue";
+import {
+  getMvpRankList,
+  getMyMvpRank,
+  getMyScoreRank,
+  getMyTenRingRank,
+  getScoreRankList,
+  getTenRingRankList,
+} from "@/apis";
 import { capsuleHeight } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
+
+const PAGE_SIZE = 10;
+
 const store = useStore();
-const { user, rankData } = storeToRefs(store);
+const { user } = storeToRefs(store);
 const { getLvlName } = store;
 
-const selectedIndex = ref(0);
-const currentList = ref([]);
-const myData = ref({});
-const addBg = ref(false);
-
-onMounted(async () => {
-  handleSelect(0);
+const createRankState = () => ({
+  list: [],
+  page: 0,
+  pageSize: PAGE_SIZE,
+  loading: false,
+  noMore: false,
+  loaded: false,
+  scrollTop: 0,
+  myData: null,
+  myDataLoaded: false,
 });
 
-const handleSelect = (index) => {
-  selectedIndex.value = index;
-  myData.value = {};
-  currentList.value = [];
-  if (index === 0) {
-    currentList.value = rankData.value.rank;
-  } else if (index === 1) {
-    currentList.value = rankData.value.mvpRank;
-  } else if (index === 2) {
-    currentList.value = rankData.value.ringRank;
+const rankTabs = [
+  {
+    key: "score",
+    title: "积分榜",
+    subTitle: "排位赛积分",
+    listApi: getScoreRankList,
+    myApi: getMyScoreRank,
+  },
+  {
+    key: "mvp",
+    title: "MVP榜",
+    subTitle: "MVP次数",
+    listApi: getMvpRankList,
+    myApi: getMyMvpRank,
+  },
+  {
+    key: "tenRing",
+    title: "十环榜",
+    subTitle: "十环次数",
+    listApi: getTenRingRankList,
+    myApi: getMyTenRingRank,
+  },
+];
+
+// 解析 ranking 页面传入的榜单参数，进入页面时默认选中对应 tab。
+const getTabIndexByRouteParam = (tab) => {
+  if (tab === "mvp") return 1;
+  if (tab === "tenRing") return 2;
+  return 0;
+};
+
+const rankStates = ref({
+  score: createRankState(),
+  mvp: createRankState(),
+  tenRing: createRankState(),
+});
+
+const selectedIndex = ref(0);
+const initialTabIndex = ref(0);
+const pageMounted = ref(false);
+const initializedFromRoute = ref(false);
+const addBg = ref(false);
+const currentScrollTop = ref(0);
+const restoreScrollTop = ref(0);
+const tabSwitchAnimating = ref(false);
+const suppressScrollSync = ref(false);
+const suppressLoadMore = ref(false);
+const stickyTabsTop = capsuleHeight + 50;
+const stickyTabsActive = ref(false);
+const tabsStickyThreshold = ref(0);
+const tabsStickyReady = ref(false);
+const tabsHeight = ref(0);
+
+const getTabConfig = (index = selectedIndex.value) => rankTabs[index];
+const getTabKey = (index = selectedIndex.value) => getTabConfig(index).key;
+
+// 统一提取榜单接口返回的列表数据，兼容数组和对象两种返回格式。
+const getRankListFromResponse = (result) => {
+  if (Array.isArray(result)) return result;
+  if (Array.isArray(result?.list)) return result.list;
+  if (Array.isArray(result?.items)) return result.items;
+  return [];
+};
+
+// 为当前登录用户构造默认的个人榜单信息，避免接口未返回时底部区域缺数据。
+const buildDefaultMyData = () => ({
+  rank: null,
+  userId: user.value.id,
+  name: user.value.nickName,
+  avatar: user.value.avatar,
+  totalScore: 0,
+  mvpCount: 0,
+  tenRings: 0,
+  totalGames: 0,
+  totalCount: 0,
+  rankName: user.value.lvlName,
+  rankLvl: user.value.rankLvl,
+});
+
+const currentTabKey = computed(() => getTabKey(selectedIndex.value));
+const currentState = computed(() => rankStates.value[currentTabKey.value]);
+const currentList = computed(() => currentState.value.list);
+const currentSubTitle = computed(() => getTabConfig(selectedIndex.value).subTitle);
+const currentMyData = computed(() => {
+  if (!user.value.id) return null;
+  return currentState.value.myData || buildDefaultMyData();
+});
+
+// 统一格式化段位和场次文案，兼容不同接口的字段命名。
+const formatLevelText = (item = {}) => {
+  const levelName = item.rankName || getLvlName(item.rankLvl) || "暂无段位";
+  const totalGames = item.totalGames ?? item.TotalGames ?? 0;
+  return `${levelName}，${totalGames}场`;
+};
+
+// 统一读取榜单项的排名字段，没有后端 rank 时回退到前端序号。
+const getDisplayRank = (item = {}, index = 0) => {
+  return item.rank ?? index + 1;
+};
+
+// 底部个人排名在未上榜时展示占位符，而不是空白。
+const getDisplayMyRank = (item = {}) => {
+  return item.rank ?? "-";
+};
+
+const getScoreValue = (item = {}) => item.totalScore ?? 0;
+const getMvpValue = (item = {}) => item.mvpCount ?? item.totalScore ?? 0;
+const getTenRingValue = (item = {}) =>
+  item.tenRings ?? item.TenRings ?? item.totalScore ?? 0;
+
+// 根据当前选中的榜单类型，读取对应的展示值。
+const getRankValue = (item = {}, index = selectedIndex.value) => {
+  if (index === 0) return getScoreValue(item);
+  if (index === 1) return getMvpValue(item);
+  return getTenRingValue(item);
+};
+
+const getRankUnit = (index = selectedIndex.value) => {
+  if (index === 0) return "分";
+  return "次";
+};
+
+// 统一设置页面当前的视觉滚动状态，避免吸顶和顶部背景不同步。
+const syncScrollVisualState = (scrollTop = 0) => {
+  currentScrollTop.value = scrollTop;
+  addBg.value = scrollTop > 100;
+  if (!tabsStickyReady.value) {
+    stickyTabsActive.value = false;
+    return;
   }
-  if (user.value.id) {
-    currentList.value.some((item) => {
-      if (item.userId === user.value.id) {
-        myData.value = item;
-        return true;
-      }
-      return false;
-    });
-    if (!myData.value.userId) {
-      myData.value = {
-        userId: user.value.id,
-        TotalGames: 0,
-        totalScore: 0,
-        mvpCount: 0,
-        TenRings: 0,
-      };
+  stickyTabsActive.value = scrollTop >= tabsStickyThreshold.value;
+};
+
+// 只保留一条滚动恢复链路：从当前滚动位置平滑滚到目标位置，避免多套控制同时生效造成闪烁。
+const applyScrollPosition = async (
+  fromScrollTop = currentScrollTop.value,
+  toScrollTop = 0,
+  withAnimation = false
+) => {
+  tabSwitchAnimating.value = withAnimation;
+  restoreScrollTop.value = fromScrollTop;
+  await nextTick();
+  restoreScrollTop.value = toScrollTop;
+  syncScrollVisualState(toScrollTop);
+};
+
+// 请求指定榜单的某一页数据，只有当前榜单会追加分页，不影响其他榜单的浏览状态。
+const loadRankPage = async (tabKey, { reset = false } = {}) => {
+  const state = rankStates.value[tabKey];
+  const config = rankTabs.find((item) => item.key === tabKey);
+  if (!config || state.loading) return;
+  if (!reset && state.noMore) return;
+
+  const nextPage = reset ? 1 : state.page + 1;
+  state.loading = true;
+  if (reset) state.noMore = false;
+
+  try {
+    const result = await config.listApi(undefined, nextPage, PAGE_SIZE);
+    const list = getRankListFromResponse(result);
+    state.list = reset ? list : state.list.concat(list);
+    state.page = nextPage;
+    state.loaded = true;
+    state.noMore = list.length < PAGE_SIZE;
+  } catch (error) {
+    if (reset) {
+      state.list = [];
+      state.page = 0;
+      state.loaded = false;
+      state.noMore = false;
     }
+    uni.showToast({
+      title: "排行榜加载失败",
+      icon: "none",
+    });
+    console.error("load rank page error", error);
+  } finally {
+    state.loading = false;
   }
 };
 
-const onScrollView = (e) => {
-  addBg.value = e.detail.scrollTop > 100;
+// 每个榜单独立请求一次个人排名信息，切回该榜单时直接复用，避免打断浏览上下文。
+const loadMyRankData = async (tabKey) => {
+  if (!user.value.id) return;
+
+  const state = rankStates.value[tabKey];
+  const config = rankTabs.find((item) => item.key === tabKey);
+  if (!config || state.myDataLoaded) return;
+
+  try {
+    const result = await config.myApi();
+    state.myData = {
+      ...buildDefaultMyData(),
+      ...(result || {}),
+    };
+  } catch (error) {
+    state.myData = buildDefaultMyData();
+    console.error("load my rank data error", error);
+  } finally {
+    state.myDataLoaded = true;
+  }
 };
 
-const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
+// 首次进入或切换到未加载过的榜单时，初始化它的分页数据和个人横条数据。
+const ensureTabReady = async (index = selectedIndex.value) => {
+  const tabKey = getTabKey(index);
+  const state = rankStates.value[tabKey];
+
+  if (!state.loaded) {
+    await loadRankPage(tabKey, { reset: true });
+  }
+
+  if (user.value.id && !state.myDataLoaded) {
+    await loadMyRankData(tabKey);
+  }
+
+  await nextTick();
+  return state.scrollTop || 0;
+};
+
+onLoad((options = {}) => {
+  initialTabIndex.value = getTabIndexByRouteParam(options.tab);
+  selectedIndex.value = initialTabIndex.value;
+  if (pageMounted.value && !initializedFromRoute.value) {
+    initializePage();
+  }
+});
+
+// 页面初始化同时兼容 onLoad 和 onMounted 的先后顺序，确保首屏一定落到路由指定的榜单。
+const initializePage = async () => {
+  if (initializedFromRoute.value) return;
+  initializedFromRoute.value = true;
+  const nextScrollTop = await ensureTabReady(selectedIndex.value);
+  await applyScrollPosition(0, nextScrollTop, false);
+  setTimeout(() => {
+    measureTabsMetrics();
+  }, 0);
+};
+
+onMounted(async () => {
+  pageMounted.value = true;
+  await initializePage();
+});
+
+// 切换榜单时保留原榜单的列表和滚动位置，切回来后继续从之前的位置浏览。
+const handleSelect = async (index) => {
+  if (index === selectedIndex.value) return;
+
+  const previousTabKey = currentTabKey.value;
+  rankStates.value[previousTabKey].scrollTop = currentScrollTop.value;
+  const previousScrollTop = currentScrollTop.value;
+
+  suppressScrollSync.value = true;
+  suppressLoadMore.value = true;
+  selectedIndex.value = index;
+  const nextScrollTop = await ensureTabReady(index);
+  await applyScrollPosition(previousScrollTop, nextScrollTop, false);
+  setTimeout(() => {
+    tabSwitchAnimating.value = false;
+    suppressScrollSync.value = false;
+    suppressLoadMore.value = false;
+  }, 220);
+};
+
+// 触底后只加载当前榜单的下一页数据，其他榜单的数据和页码保持不变。
+const loadMore = async () => {
+  if (suppressLoadMore.value) return;
+  await loadRankPage(currentTabKey.value);
+};
+
+// 实时记录当前榜单的滚动位置，切换回来时恢复到上一次浏览位置。
+const onScrollView = (e) => {
+  const scrollTop = e.detail.scrollTop || 0;
+  if (suppressScrollSync.value) return;
+  syncScrollVisualState(scrollTop);
+  rankStates.value[currentTabKey.value].scrollTop = scrollTop;
+};
+
+// 计算 tab 在滚动内容中的真实位置和高度，作为吸顶切换的唯一依据。
+const measureTabsMetrics = () => {
+  const query = uni.createSelectorQuery();
+  query
+    .select("#rank-list-content-start")
+    .boundingClientRect()
+    .select(".rank-tabs-anchor")
+    .boundingClientRect()
+    .exec((res = []) => {
+      const [startRect, rect] = res;
+      if (!startRect || !rect) return;
+      const tabOffset = rect.top - startRect.top;
+      tabsStickyThreshold.value = Math.max(0, tabOffset - 92);
+      tabsHeight.value = rect.height || 0;
+      tabsStickyReady.value = true;
+      syncScrollVisualState(currentScrollTop.value);
+    });
+};
 </script>
 
 <template>
@@ -65,7 +340,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
     >
       <image
         :style="{ opacity: addBg ? 1 : 0 }"
-        src="../static/app-bg.png"
+        src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
         mode="widthFix"
       />
       <navigator open-type="navigateBack">
@@ -75,18 +350,32 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
     </view>
     <scroll-view
       scroll-y
+      :scroll-with-animation="tabSwitchAnimating"
+      :scroll-top="restoreScrollTop"
       @scroll="onScrollView"
-      :style="{ height: myData.userId ? '90vh' : '100vh' }"
+      @scrolltolower="loadMore"
+      :style="{ height: user.id ? '90vh' : '100vh' }"
     >
+      <view id="rank-list-content-start" class="content-start-anchor"></view>
       <image
         src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9b3wcrwnlnghiq.png"
         mode="widthFix"
         class="header-bg"
+        @load="measureTabsMetrics"
       />
-      <view class="rank-tabs">
+      <view
+        v-if="stickyTabsActive"
+        class="rank-tabs-placeholder"
+        :style="{ height: `${tabsHeight}px` }"
+      />
+      <view
+        class="rank-tabs rank-tabs-anchor"
+        :class="{ 'rank-tabs-anchor-fixed': stickyTabsActive }"
+        :style="stickyTabsActive ? { top: `${stickyTabsTop}px` } : {}"
+      >
         <view
-          v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
-          :key="index"
+          v-for="(rankType, index) in rankTabs"
+          :key="rankType.key"
           :style="{
             fontSize: index === selectedIndex ? '16px' : '14px',
             color: index === selectedIndex ? '#000' : '#fff',
@@ -94,18 +383,18 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
           }"
           @tap="handleSelect(index)"
         >
-          {{ rankType }}
+          {{ rankType.title }}
         </view>
       </view>
       <view class="rank-list">
         <view class="rank-list-header">
           <text>排名</text>
           <text>用户ID</text>
-          <text>{{ subTitles[selectedIndex] }}</text>
+          <text>{{ currentSubTitle }}</text>
         </view>
         <view
           v-for="(item, index) in currentList"
-          :key="index"
+          :key="`${currentTabKey}-${index}-${item.userId || item.name}`"
           class="rank-list-item"
           :style="{
             backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
@@ -147,65 +436,60 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
             src="../static/champ3.png"
             mode="widthFix"
           />
-          <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
+          <view v-if="index > 2" class="view-crown">
+            {{ getDisplayRank(item, index) }}
+          </view>
           <Avatar :src="item.avatar" />
           <view class="rank-item-content">
             <text class="truncate">{{ item.name }}</text>
-            <text>{{ getLvlName(item.rankLvl) }}，{{ item.TotalGames }}场</text>
+            <text>{{ formatLevelText(item) }}</text>
           </view>
-          <text class="rank-item-integral" v-if="selectedIndex === 0">
+          <text class="rank-item-integral">
             <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
-            >次
+            >
+              {{ getRankValue(item) }}
+            </text>
+            {{ getRankUnit() }}
           </text>
         </view>
-        <view v-if="!currentList.length" class="no-data">
-          <text>筹备中...</text>
+        <view
+          v-if="currentState.loading && !currentList.length"
+          class="no-data"
+        >
+          <text>加载中...</text>
+        </view>
+        <view
+          v-else-if="!currentState.loading && !currentList.length"
+          class="no-data"
+        >
+          <text>暂无数据</text>
+        </view>
+        <view v-else class="list-tip">
+          <text v-if="currentState.loading">加载中...</text>
+          <text v-else-if="currentState.noMore">没有更多了</text>
         </view>
       </view>
     </scroll-view>
-    <view class="my-rank-data" v-if="myData.userId">
+    <view class="my-rank-data" v-if="currentMyData">
       <image
         src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbuaf19pf7qd8ps0uh.png"
         mode="widthFix"
       />
-      <text>{{ myData.rank }}</text>
-      <Avatar :src="user.avatar" />
+      <text>{{ getDisplayMyRank(currentMyData) }}</text>
+      <Avatar :src="currentMyData.avatar || user.avatar" />
       <view class="rank-item-content">
-        <text class="truncate">{{ user.nickName }}</text>
-        <text>{{ user.lvlName }}，{{ myData.TotalGames }}场</text>
+        <text class="truncate">{{ currentMyData.name || user.nickName }}</text>
+        <text>{{ formatLevelText(currentMyData) }}</text>
       </view>
-      <text class="rank-item-integral" v-if="selectedIndex === 0">
+      <text class="rank-item-integral">
         <text
           :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-          >{{ myData.totalScore || 0 }}</text
-        >分</text
-      >
-      <text class="rank-item-integral" v-if="selectedIndex === 1">
-        <text
-          :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-          >{{ myData.mvpCount || 0 }}</text
-        >次</text
-      >
-      <text class="rank-item-integral" v-if="selectedIndex === 2">
-        <text
-          :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-          >{{ myData.TenRings || 0 }}</text
-        >次</text
-      >
+        >
+          {{ getRankValue(currentMyData) }}
+        </text>
+        {{ getRankUnit() }}
+      </text>
     </view>
   </view>
 </template>
@@ -214,9 +498,16 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
 .container {
   width: 100%;
 }
+
+.content-start-anchor {
+  width: 100%;
+  height: 0;
+}
+
 .header-bg {
   width: 100%;
 }
+
 .header {
   width: 100%;
   height: 50px;
@@ -227,6 +518,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   z-index: 10;
   overflow: hidden;
 }
+
 .header-back {
   width: 22px;
   height: 22px;
@@ -234,6 +526,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   margin-top: 5px;
   position: relative;
 }
+
 .header > image:first-child {
   width: 100vw;
   height: 100vh;
@@ -242,25 +535,40 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   left: 0;
   transition: all 0.5s ease;
 }
+
 .header > text {
   color: #fff;
   font-weight: bold;
   transition: all 0.5s ease;
   position: relative;
 }
+
 .rank-tabs {
   width: calc(100% - 20px);
   display: flex;
   justify-content: space-around;
-  padding: 0 10px;
-  margin-top: -15px;
+  padding: 20rpx 10px;
 }
+
 .rank-tabs > view {
   width: 25%;
   padding: 10px;
   text-align: center;
   border-radius: 20px;
 }
+
+.rank-tabs-placeholder {
+  width: 100%;
+}
+
+.rank-tabs-anchor-fixed {
+  position: fixed;
+  left: 0;
+  z-index: 11;
+  background: #000000;
+  backdrop-filter: blur(8px);
+}
+
 .rank-list {
   display: flex;
   flex-direction: column;
@@ -268,11 +576,12 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   width: calc(100% - 20px);
   color: #fff9;
   font-size: 12px;
-  margin: 10px;
+  margin: 0 10px 10px 10px;
   border: 1px solid rgb(255 217 71 / 0.2);
   border-radius: 10px;
   background-color: #313131;
 }
+
 .rank-list > view {
   display: flex;
   align-items: center;
@@ -281,20 +590,25 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   overflow: hidden;
   position: relative;
 }
+
 .rank-list-header {
   width: calc(100% - 20px) !important;
   padding: 10px;
 }
+
 .rank-list-header > text:nth-child(2) {
   width: 14%;
 }
+
 .rank-list-header > text:last-child {
   width: 30%;
   text-align: right;
 }
+
 .rank-list-item {
   padding: 10px 0;
 }
+
 .player-bg {
   position: absolute;
   width: 100%;
@@ -302,12 +616,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   top: 0;
   left: 0;
 }
+
 .player-crown {
   position: relative;
   width: 27px;
   height: 27px;
   margin: 0 15px;
 }
+
 .view-crown {
   width: 27px;
   height: 27px;
@@ -319,6 +635,7 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   background-color: #676767;
   position: relative;
 }
+
 .rank-item-content {
   display: flex;
   flex-direction: column;
@@ -328,17 +645,20 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   position: relative;
   padding-left: 10px;
 }
+
 .rank-item-content > text:first-child {
   color: #fff;
   font-size: 14px;
   margin-bottom: 3px;
   width: 120px;
 }
+
 .rank-list-item > text:last-child {
   margin-right: 10px;
   width: 56px;
   text-align: right;
 }
+
 .my-rank-data {
   width: calc(100% - 30px);
   padding: 15px;
@@ -352,12 +672,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   overflow: hidden;
   border-radius: 10px;
 }
+
 .my-rank-data > image:first-child {
   position: absolute;
   width: 100%;
   left: 0;
   top: -5px;
 }
+
 .my-rank-data > text:nth-child(2) {
   background-color: #c1a434;
   position: relative;
@@ -369,20 +691,24 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   min-width: 15px;
   text-align: center;
 }
+
 .my-rank-data > text:last-child {
   position: relative;
   margin-right: 10px;
   width: 65px;
   text-align: right;
 }
+
 .my-rank-data > .rank-item-content > text:first-child {
   color: #fed847;
 }
+
 .my-rank-data > .rank-item-integral {
   color: #fff9;
   font-size: 12px;
   margin-right: 0 !important;
 }
+
 .no-data {
   width: 100%;
   height: 400px;
@@ -392,4 +718,11 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
   color: #fff9;
   font-size: 14px;
 }
+
+.list-tip {
+  justify-content: center !important;
+  color: #fff9;
+  font-size: 12px;
+  min-height: 60rpx;
+}
 </style>
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index 8bd2ea9..bd75ee9 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,46 +1,103 @@
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import { topThreeColors } from "@/constants";
-import { getHomeData } from "@/apis";
+import {
+  getSeasonList,
+  getSeasonStats,
+  getScoreRankList,
+  getTenRingRankList,
+  getMvpRankList,
+} from "@/apis";
 import { canEenter } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
+
 const store = useStore();
 const { user, device, online, game } = storeToRefs(store);
 const { getLvlName } = store;
 
-const defaultSeasonData = {
-  "1v1": { totalGames: 0, winCount: 0, winRate: 0 },
-  "2v2": { totalGames: 0, winCount: 0, winRate: 0 },
-  "3v3": { totalGames: 0, winCount: 0, winRate: 0 },
-  "5m": { totalGames: 0, winCount: 0, winRate: 0 },
-  "10m": { totalGames: 0, winCount: 0, winRate: 0 },
+const defaultSeasonStats = {
+  nickName: "",
+  avatar: "",
+  season: "",
+  seasonId: 0,
+  score: 0,
+  rankName: "",
+  rankLvl: 0,
+  rankIcon: "",
+  avgRing: 0,
+  winRate: 0,
+  modeStats: [],
 };
 
+const defaultModeStats = {
+  "1v1": { modeName: "", count: 0, winRate: 0, mvpCount: 0, scoreRate: 0 },
+  "2v2": { modeName: "", count: 0, winRate: 0, mvpCount: 0, scoreRate: 0 },
+  "3v3": { modeName: "", count: 0, winRate: 0, mvpCount: 0, scoreRate: 0 },
+  "5m": { modeName: "", count: 0, winRate: 0, mvpCount: 0, scoreRate: 0 },
+  "10m": { modeName: "", count: 0, winRate: 0, mvpCount: 0, scoreRate: 0 },
+};
+
+const RANK_PAGE = 1;
+const RANK_PAGE_SIZE = 10;
+
 const selectedIndex = ref(0);
-const currentList = ref([]);
 const seasonName = ref("");
 const seasonData = ref([]);
-const rankData = ref({ user: {} });
+const currentSeasonId = ref();
+const seasonStats = ref({ ...defaultSeasonStats });
 const showSeasonList = ref(false);
-const currentSeasonData = ref(defaultSeasonData);
+const currentSeasonData = ref({ ...defaultModeStats });
+const rankLoading = ref(false);
+const scoreRankList = ref([]);
+const mvpRankList = ref([]);
+const tenRingRankList = ref([]);
 
-const handleSelect = (index) => {
-  selectedIndex.value = index;
-  if (index === 0 && rankData.value.rank) {
-    currentList.value = rankData.value.rank.slice(0, 10);
-  } else if (index === 1 && rankData.value.mvpRank) {
-    currentList.value = rankData.value.mvpRank.slice(0, 10);
-  } else if (index === 2 && rankData.value.ringRank) {
-    currentList.value = rankData.value.ringRank.slice(0, 10);
-  } else {
-    currentList.value = [];
-  }
+// 根据接口返回结构提取榜单数组，兼容数组和对象两种返回形式。
+const getRankListFromResponse = (result) => {
+  if (Array.isArray(result)) return result;
+  if (Array.isArray(result?.list)) return result.list;
+  if (Array.isArray(result?.items)) return result.items;
+  return [];
 };
 
+// 把赛季统计接口里的 modeStats 转成页面当前使用的结构，同时保留后端返回的 modeName。
+const buildModeStats = (modeStats = []) => {
+  const nextStats = {
+    "1v1": { ...defaultModeStats["1v1"] },
+    "2v2": { ...defaultModeStats["2v2"] },
+    "3v3": { ...defaultModeStats["3v3"] },
+    "5m": { ...defaultModeStats["5m"] },
+    "10m": { ...defaultModeStats["10m"] },
+  };
+
+  modeStats.forEach((item) => {
+    if (item.mode === 1) nextStats["1v1"] = { ...nextStats["1v1"], ...item };
+    if (item.mode === 2) nextStats["2v2"] = { ...nextStats["2v2"], ...item };
+    if (item.mode === 3) nextStats["3v3"] = { ...nextStats["3v3"], ...item };
+    if (item.mode === 4) nextStats["5m"] = { ...nextStats["5m"], ...item };
+    if (item.mode === 5) nextStats["10m"] = { ...nextStats["10m"], ...item };
+  });
+
+  return nextStats;
+};
+
+// 当前选中榜单的数据，只用于统一处理加载态和空态。
+const currentRankList = computed(() => {
+  if (selectedIndex.value === 0) return scoreRankList.value;
+  if (selectedIndex.value === 1) return mvpRankList.value;
+  return tenRingRankList.value;
+});
+
+const latestSeasonId = computed(() => seasonData.value[0]?.seasonId);
+const isLatestSeasonSelected = computed(() => {
+  if (!currentSeasonId.value || !latestSeasonId.value) return true; // 默认显示，防止数据未加载时闪烁
+  return currentSeasonId.value === latestSeasonId.value;
+});
+
 const toMatchPage = async (gameType, teamSize) => {
   if (!canEenter(user.value, device.value, online.value)) return;
   if (game.value.inBattle) {
@@ -52,85 +109,212 @@ const toMatchPage = async (gameType, teamSize) => {
     url: `/pages/match-page?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
+
 const toMyGrowthPage = () => {
   uni.navigateTo({
     url: "/pages/my-growth",
   });
 };
+
 const toRankListPage = () => {
+  const tabMap = ["score", "mvp", "tenRing"];
   uni.navigateTo({
-    url: "/pages/rank-list",
+    url: `/pages/rank-list?tab=${tabMap[selectedIndex.value] || "score"}`,
   });
 };
+
+// 组装榜单副标题，统一处理段位和场次展示。
+const formatRankSubTitle = (item = {}) => {
+  const levelName = item.rankName || getLvlName(item.rankLvl) || "-";
+  const totalGames = item.totalGames ?? item.TotalGames ?? 0;
+  return `${levelName}，${totalGames}场`;
+};
+
+// 组装顶部赛季统计文案，区分胜率和得分率。
+const formatSeasonText = (stats = {}, rateKey = "winRate", rateLabel = "胜率") => {
+  const totalGames = stats.count || 0;
+  const rateValue = stats[rateKey] || 0;
+  let text = `${totalGames}场 ${rateLabel} ${rateValue}%`;
+
+  // 只有当 2V2 (mode=2) 或 3V3 (mode=3) 时，在胜率后面新增 MVP 次数
+  if (stats.mode === 2 || stats.mode === 3) {
+    const mvpCount = stats.mvpCount || 0;
+    text += `，MVP次数 ${mvpCount}`;
+  }
+
+  return text;
+};
+
+// 统一处理顶部统计展示，避免数值为 0 时被误显示成占位符。
+const formatTopStatValue = (value, suffix = "") => {
+  if (value === undefined || value === null || value === "") return "-";
+  return `${value}${suffix}`;
+};
+
+// 请求赛季统计接口，并更新顶部展示和各模式数据。
+const loadSeasonStats = async (seasonId = currentSeasonId.value) => {
+  const result = await getSeasonStats(seasonId);
+  seasonStats.value = {
+    ...defaultSeasonStats,
+    ...(result || {}),
+  };
+
+  currentSeasonId.value = seasonStats.value.seasonId || seasonId;
+  seasonName.value = seasonStats.value.season || seasonName.value;
+  currentSeasonData.value = buildModeStats(seasonStats.value.modeStats);
+};
+
+// 根据当前 tab 请求对应榜单，每次切换都重新获取最新数据，不走缓存。
+const loadRankList = async (
+  index = selectedIndex.value,
+  seasonId = currentSeasonId.value
+) => {
+  if (!seasonId) return;
+
+  rankLoading.value = true;
+  try {
+    if (index === 0) {
+      const result = await getScoreRankList(seasonId, RANK_PAGE, RANK_PAGE_SIZE);
+      scoreRankList.value = getRankListFromResponse(result);
+      return;
+    }
+
+    if (index === 1) {
+      const result = await getMvpRankList(seasonId, RANK_PAGE, RANK_PAGE_SIZE);
+      mvpRankList.value = getRankListFromResponse(result);
+      return;
+    }
+
+    const result = await getTenRingRankList(
+      seasonId,
+      RANK_PAGE,
+      RANK_PAGE_SIZE
+    );
+    tenRingRankList.value = getRankListFromResponse(result);
+  } catch (error) {
+    if (index === 0) scoreRankList.value = [];
+    else if (index === 1) mvpRankList.value = [];
+    else tenRingRankList.value = [];
+
+    uni.showToast({
+      title: "排行榜加载失败",
+      icon: "none",
+    });
+    console.error("load rank list error", error);
+  } finally {
+    rankLoading.value = false;
+  }
+};
+
+// 切换榜单时更新选中态，并重新请求对应的榜单数据。
+const handleSelect = async (index) => {
+  selectedIndex.value = index;
+  await loadRankList(index);
+};
+
+// 切换赛季时同时刷新顶部统计和当前榜单数据。
 const onChangeSeason = async (seasonId, name) => {
   showSeasonList.value = false;
-  if (name !== seasonName.value) {
-    handleSelect(selectedIndex.value);
-    const result = await getHomeData(seasonId);
-    rankData.value = result;
-    seasonName.value = name;
-    updateData();
-  }
-};
-const updateData = () => {
-  const { userGameStats, seasonList } = rankData.value;
-  currentSeasonData.value = { ...defaultSeasonData };
-  if (
-    userGameStats &&
-    userGameStats.stats_list &&
-    userGameStats.stats_list.length
-  ) {
-    userGameStats.stats_list.forEach((item) => {
-      if (seasonList.length) {
-        seasonList.some((s) => {
-          if (s.seasonId === item.seasonId) {
-            seasonName.value = s.seasonName;
-            return true;
-          }
-          return false;
-        });
-      }
-      let keyName = "";
-      if (item.gameType === 1 && item.teamSize === 2) keyName = "1v1";
-      if (item.gameType === 1 && item.teamSize === 4) keyName = "2v2";
-      if (item.gameType === 1 && item.teamSize === 6) keyName = "3v3";
-      if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
-      if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
-      if (keyName) {
-        currentSeasonData.value[keyName] = {
-          totalGames: item.totalGames,
-          winCount: item.winCount,
-          winRate: Number(((item.winCount / item.totalGames) * 100).toFixed(1)),
-        };
-      }
+  if (seasonId === currentSeasonId.value) return;
+
+  currentSeasonId.value = seasonId;
+  seasonName.value = name;
+
+  try {
+    await loadSeasonStats(seasonId);
+    await loadRankList(selectedIndex.value, seasonId);
+  } catch (error) {
+    uni.showToast({
+      title: "赛季数据加载失败",
+      icon: "none",
     });
+    console.error("change season error", error);
   }
 };
+
+// 页面显示时先拿赛季列表，再拉当前赛季统计和默认榜单数据。
 onShow(async () => {
-  const result = await getHomeData();
-  rankData.value = result;
-  handleSelect(selectedIndex.value);
-  seasonData.value = result.seasonList || [];
-  if (seasonData.value[0]) {
-    seasonName.value = seasonData.value[0].seasonName;
+  try {
+    const seasonResult = await getSeasonList();
+    seasonData.value = seasonResult.list || [];
+
+    if (!seasonData.value.length) {
+      seasonStats.value = { ...defaultSeasonStats };
+      currentSeasonData.value = { ...defaultModeStats };
+      scoreRankList.value = [];
+      mvpRankList.value = [];
+      tenRingRankList.value = [];
+      showSeasonList.value = false;
+      return;
+    }
+
+    const currentSeason =
+      seasonData.value.find((item) => item.seasonId === currentSeasonId.value) ||
+      seasonData.value[0];
+
+    currentSeasonId.value = currentSeason.seasonId;
+    seasonName.value = currentSeason.seasonName;
+    showSeasonList.value = false;
+
+    await Promise.all([
+      loadSeasonStats(currentSeasonId.value),
+      loadRankList(selectedIndex.value, currentSeasonId.value),
+    ]);
+  } catch (error) {
+    uni.showToast({
+      title: "页面数据加载失败",
+      icon: "none",
+    });
+    console.error("ranking page load error", error);
   }
-  updateData();
-  showSeasonList.value = false;
 });
 </script>
 
 <template>
-  <Container title="排位赛" :showBackToGame="true">
+  <Container title="排位赛" :showBackToGame="true" :bgType="6">
+    <view class="battle-types-box">
+      <view class="battle-types">
+        <view class="first">
+          <image src="../static/rank/battle-choose.png" mode="widthFix" />
+          <image class="star" src="../static/rank/star.png" mode="widthFix" />
+        </view>
+        <image
+          src="../static/rank/battle1v1.svg"
+          mode="widthFix"
+          @click.stop="() => toMatchPage(1, 2)"
+        />
+        <image
+          src="../static/rank/battle2v2.svg"
+          mode="widthFix"
+          @click.stop="() => toMatchPage(2, 4)"
+        />
+        <image
+          src="../static/rank/battle3v3.svg"
+          mode="widthFix"
+          @click.stop="() => toMatchPage(3, 6)"
+        />
+        <image
+          src="../static/rank/battle5.svg"
+          mode="widthFix"
+          @click.stop="() => toMatchPage(4, 5)"
+        />
+        <image
+          src="../static/rank/battle10.svg"
+          mode="widthFix"
+          @click.stop="() => toMatchPage(5, 10)"
+        />
+      </view>
+    </view>
     <view class="container" @click="() => (showSeasonList = false)">
       <view class="ranking-my-data" v-if="user.id">
         <view>
           <view class="user-info">
             <Avatar
               :src="user.avatar"
-              :rankLvl="rankData.user.rankLvl"
+              :rankLvl="seasonStats.rankLvl"
               :size="30"
             />
-            <text>{{ user.nickName }}</text>
+            <text>{{ seasonStats.nickName || user.nickName }}</text>
           </view>
           <view
             class="ranking-season"
@@ -140,7 +324,7 @@ onShow(async () => {
             <text>{{ seasonName }}</text>
             <image
               v-show="seasonData.length > 1"
-              src="../static/triangle.png"
+              src="../static/rank/triangle.png"
               mode="widthFix"
             />
             <view class="season-list" v-if="showSeasonList">
@@ -151,10 +335,16 @@ onShow(async () => {
                   () => onChangeSeason(item.seasonId, item.seasonName)
                 "
               >
-                <text>{{ item.seasonName }}</text>
+                <text
+                  :style="{
+                    color: item.seasonName === seasonName ? '#E7BA80' : '#FFFFFF',
+                  }"
+                >
+                  {{ item.seasonName }}
+                </text>
                 <image
                   v-if="item.seasonName === seasonName"
-                  src="../static/triangle.png"
+                  src="../static/rank/triangle.png"
                   mode="widthFix"
                 />
               </view>
@@ -164,177 +354,120 @@ onShow(async () => {
         <view class="my-data">
           <view>
             <text>段位</text>
-            <text :style="{ color: '#83CDFF' }">{{
-              getLvlName(rankData.user.rankLvl) || "-"
-            }}</text>
+            <text :style="{ color: '#E7BA80' }">
+              {{ seasonStats.rankName || getLvlName(seasonStats.rankLvl) || "-" }}
+            </text>
           </view>
           <view>
             <text>赛季平均环数</text>
-            <text :style="{ color: '#FFD947' }">{{
-              rankData.user.avg_ring ? rankData.user.avg_ring + "环" : "-"
-            }}</text>
+            <text :style="{ color: '#E7BA80' }">
+              {{ formatTopStatValue(seasonStats.avgRing, "环") }}
+            </text>
           </view>
           <view>
             <text>赛季胜率</text>
-            <text :style="{ color: '#FF507E' }">{{
-              rankData.user.avg_win
-                ? Number((rankData.user.avg_win * 100).toFixed(2)) + "%"
-                : "-"
-            }}</text>
+            <text :style="{ color: '#E7BA80' }">
+              {{ formatTopStatValue(seasonStats.winRate, "%") }}
+            </text>
           </view>
           <view class="my-rank-score">
-            <image src="../static/bubble-tip5.png" mode="widthFix" />
-            <text>积分：{{ Math.max(0, rankData.user.scores) }}</text>
+            <image src="../static/rank/bubble-tip.png" mode="widthFix" />
+            <text>积分：{{ seasonStats.score }}</text>
           </view>
         </view>
-        <view class="battle-types">
-          <image src="../static/battle-choose.png" mode="widthFix" />
-          <image
-            src="../static/battle1v1.png"
-            mode="widthFix"
-            @click.stop="() => toMatchPage(1, 2)"
-          />
-          <image
-            src="../static/battle2v2.png"
-            mode="widthFix"
-            @click.stop="() => toMatchPage(2, 4)"
-          />
-          <image
-            src="../static/battle3v3.png"
-            mode="widthFix"
-            @click.stop="() => toMatchPage(3, 6)"
-          />
-          <image
-            src="../static/battle5.png"
-            mode="widthFix"
-            @click.stop="() => toMatchPage(4, 5)"
-          />
-          <image
-            src="../static/battle10.png"
-            mode="widthFix"
-            @click.stop="() => toMatchPage(5, 10)"
-          />
-        </view>
         <view class="data-progress">
-          <text>
-            {{
-              `【1 V 1】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
-            }}
-          </text>
-          <view>
+          <view class="data-name-box">
+            <text class="data-name">{{ currentSeasonData["1v1"].modeName || "1V1" }}&nbsp;</text>
+            <text>{{ formatSeasonText(currentSeasonData["1v1"], "winRate", "胜率") }}</text>
+          </view>
+          <view class="data-progress-line">
             <view
-              :style="{
-                width: `${currentSeasonData['1v1'].winRate}%`,
-                backgroundColor: '#9479FF',
-              }"
+              :style="{ width: `${currentSeasonData['1v1'].winRate}%` }"
             />
           </view>
         </view>
         <view class="data-progress">
-          <text>
-            {{
-              `【2 V 2】${currentSeasonData["2v2"].totalGames}场 胜率 ${currentSeasonData["2v2"].winRate}%`
-            }}
-          </text>
-          <view>
+          <view class="data-name-box">
+            <text class="data-name">{{ currentSeasonData["2v2"].modeName || "2V2" }}&nbsp;</text>
+            <text>{{ formatSeasonText(currentSeasonData["2v2"], "winRate", "胜率") }}</text>
+          </view>
+          <view class="data-progress-line">
             <view
-              :style="{
-                width: `${currentSeasonData['2v2'].winRate}%`,
-                backgroundColor: '#69B5FF',
-              }"
+              :style="{ width: `${currentSeasonData['2v2'].winRate}%` }"
             />
           </view>
         </view>
         <view class="data-progress">
-          <text>
-            {{
-              `【3 V 3】${currentSeasonData["3v3"].totalGames}场 胜率 ${currentSeasonData["3v3"].winRate}%`
-            }}
-          </text>
-          <view>
+          <view class="data-name-box">
+            <text class="data-name">{{ currentSeasonData["3v3"].modeName || "3V3" }}&nbsp;</text>
+            <text>{{ formatSeasonText(currentSeasonData["3v3"], "winRate", "胜率") }}</text>
+          </view>
+          <view class="data-progress-line">
             <view
-              :style="{
-                width: `${currentSeasonData['3v3'].winRate}%`,
-                backgroundColor: '#FF8C8C',
-              }"
+              :style="{ width: `${currentSeasonData['3v3'].winRate}%` }"
             />
           </view>
         </view>
         <view class="data-progress">
-          <text>
-            {{
-              `【5人大乱斗】${currentSeasonData["5m"].totalGames}场 得分率 ${currentSeasonData["5m"].winRate}%`
-            }}
-          </text>
-          <view>
+          <view class="data-name-box">
+            <text class="data-name">{{ currentSeasonData["5m"].modeName || "5V5" }}&nbsp;</text>
+            <text>{{ formatSeasonText(currentSeasonData["5m"], "scoreRate", "得分率") }}</text>
+          </view>
+          <view class="data-progress-line">
             <view
-              :style="{
-                width: `${currentSeasonData['5m'].winRate}%`,
-                backgroundColor: '#FFD947',
-              }"
+              :style="{ width: `${currentSeasonData['5m'].scoreRate}%` }"
             />
           </view>
         </view>
         <view class="data-progress">
-          <text>
-            {{
-              `【10人大乱斗】${currentSeasonData["10m"].totalGames}场 得分率 ${currentSeasonData["10m"].winRate}%`
-            }}
-          </text>
-          <view>
+          <view class="data-name-box">
+            <text class="data-name">{{ currentSeasonData["10m"].modeName || "10人大乱斗" }}&nbsp;</text>
+            <text>{{ formatSeasonText(currentSeasonData["10m"], "scoreRate", "得分率") }}</text>
+          </view>
+          <view class="data-progress-line">
             <view
-              :style="{
-                width: `${currentSeasonData['10m'].winRate}%`,
-                backgroundColor: '#F27ADF',
-              }"
+              :style="{ width: `${currentSeasonData['10m'].scoreRate}%` }"
             />
           </view>
         </view>
-        <view @click.stop="toMyGrowthPage">查看我的比赛记录</view>
+        <view class="growth-btn" @click.stop="toMyGrowthPage">
+          查看我的比赛记录
+          <image
+            style="width: 30rpx; vertical-align: -2px"
+            src="../static/enter.png"
+            mode="widthFix"
+          />
+        </view>
       </view>
       <view class="ranking-data">
         <view>
           <view
-            v-for="(rankType, index) in [
-              '积分榜',
-              'MVP榜',
-              '十环榜',
-              '最牛省份',
-            ]"
+            v-for="(rankType, index) in ['积分榜', 'MVP榜', '十环榜']"
             :key="index"
             :style="{
-              color: index === selectedIndex ? '#000' : '#fff',
-              backgroundColor:
-                index === selectedIndex ? '#FFD947' : 'transparent',
+              color: '#fff',
+              opacity: index === selectedIndex ? '1' : '0.7',
+              background:
+                index === selectedIndex
+                  ? 'linear-gradient(133deg, #FFD19A 0%, #A17636 100%)'
+                  : 'rgba(255,255,255,0.1)',
             }"
             @tap="handleSelect(index)"
           >
             {{ rankType }}
           </view>
         </view>
+
         <view
-          v-for="(item, index) in currentList"
-          :key="index"
-          :style="{
-            backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
-          }"
+          v-if="selectedIndex === 0"
+          v-for="(item, index) in scoreRankList"
+          :key="`score-${index}`"
+          :style="{ backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent' }"
           class="rank-item"
         >
-          <image
-            v-if="index === 0"
-            src="../static/champ1.png"
-            mode="widthFix"
-          />
-          <image
-            v-if="index === 1"
-            src="../static/champ2.png"
-            mode="widthFix"
-          />
-          <image
-            v-if="index === 2"
-            src="../static/champ3.png"
-            mode="widthFix"
-          />
+          <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
+          <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
+          <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
           <view v-if="index > 2">{{ index + 1 }}</view>
           <image
             :src="item.avatar || '../static/user-icon.png'"
@@ -343,24 +476,64 @@ onShow(async () => {
           />
           <view>
             <text class="truncate">{{ item.name }}</text>
-            <text>
-              {{ getLvlName(item.rankLvl) }}，{{ item.TotalGames }}场
-            </text>
+            <text>{{ formatRankSubTitle(item) }}</text>
           </view>
-          <text v-if="selectedIndex === 0">
-            {{ item.totalScore }}<text>分</text>
-          </text>
-          <text v-if="selectedIndex === 1">
-            {{ item.mvpCount }}<text>次</text>
-          </text>
-          <text v-if="selectedIndex === 2">
-            {{ item.TenRings }}<text>次</text>
-          </text>
+          <text>{{ item.totalScore || 0 }}<text>分</text></text>
         </view>
-        <view v-if="!currentList.length" class="no-data">
-          <text>筹备中...</text>
+
+        <view
+          v-if="selectedIndex === 1"
+          v-for="(item, index) in mvpRankList"
+          :key="`mvp-${index}`"
+          :style="{ backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent' }"
+          class="rank-item"
+        >
+          <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
+          <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
+          <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
+          <view v-if="index > 2">{{ index + 1 }}</view>
+          <image
+            :src="item.avatar || '../static/user-icon.png'"
+            mode="widthFix"
+            :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+          />
+          <view>
+            <text class="truncate">{{ item.name }}</text>
+            <text>{{ formatRankSubTitle(item) }}</text>
+          </view>
+          <text>{{ item.mvpCount || 0 }}<text>次</text></text>
         </view>
-        <view class="see-more" @click.stop="toRankListPage">点击查看更多</view>
+
+        <view
+          v-if="selectedIndex === 2"
+          v-for="(item, index) in tenRingRankList"
+          :key="`ten-ring-${index}`"
+          :style="{ backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent' }"
+          class="rank-item"
+        >
+          <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
+          <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
+          <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
+          <view v-if="index > 2">{{ index + 1 }}</view>
+          <image
+            :src="item.avatar || '../static/user-icon.png'"
+            mode="widthFix"
+            :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+          />
+          <view>
+            <text class="truncate">{{ item.name }}</text>
+            <text>{{ formatRankSubTitle(item) }}</text>
+          </view>
+          <text>{{ item.tenRings ?? item.TenRings ?? 0 }}<text>次</text></text>
+        </view>
+
+        <view v-if="rankLoading" class="no-data">
+          <text>加载中...</text>
+        </view>
+        <view v-else-if="!currentRankList.length" class="no-data">
+          <text>暂无数据</text>
+        </view>
+        <view v-if="isLatestSeasonSelected" class="see-more" @click.stop="toRankListPage">点击查看更多</view>
       </view>
     </view>
   </Container>
@@ -369,34 +542,34 @@ onShow(async () => {
 <style scoped>
 .container {
   width: 100%;
+  padding-bottom: 40rpx;
 }
+
 .ranking-my-data,
 .ranking-data {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  background-color: #54431d33;
-  border: 1px solid #54431d;
-  border-radius: 10px;
+  background: rgba(84, 67, 29, 0.3);
+  border: 2rpx solid rgba(255, 217, 71, 0.2);
+  border-radius: 24rpx;
   margin: 0 15px;
-}
-.ranking-data {
   margin-bottom: 20px;
 }
+
 .ranking-my-data {
-  margin-bottom: 15px;
-}
-.ranking-my-data {
-  padding: 15px;
+  padding: 30rpx 30rpx 38rpx 30rpx;
+  margin-bottom: 16rpx;
 }
+
 .ranking-my-data > view:first-of-type {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  border-bottom: 1px solid #48494e;
   padding-bottom: 15px;
 }
+
 .user-info {
   display: flex;
   justify-content: center;
@@ -404,24 +577,29 @@ onShow(async () => {
   color: #fff;
   font-size: 14px;
 }
+
 .user-info > text {
   margin-left: 15px;
 }
+
 .ranking-season {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
 }
+
 .ranking-season > image {
   width: 12px;
   height: 12px;
 }
+
 .ranking-season > text {
-  color: #ffd947;
+  color: #e7ba80;
   font-size: 14px;
   margin-right: 5px;
 }
+
 .my-data {
   display: flex;
   align-items: center;
@@ -432,6 +610,7 @@ onShow(async () => {
   position: relative;
   transform: translateX(-5%);
 }
+
 .my-data > view {
   display: flex;
   flex-direction: column;
@@ -441,29 +620,58 @@ onShow(async () => {
   height: 60px;
   position: relative;
 }
+
 .my-data > view:nth-child(2) {
   border-left: 1px solid #48494e;
   border-right: 1px solid #48494e;
   padding: 0 15px;
 }
+
 .my-data > view > text:first-child {
   font-size: 14px;
 }
+
 .my-data > view > text:last-child {
   font-size: 18px;
 }
+
+.battle-types-box {
+  width: 100%;
+  padding: 28rpx;
+  box-sizing: border-box;
+}
+
 .battle-types {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  width: 100%;
-  margin-top: 15px;
   row-gap: 8px;
   column-gap: 8px;
 }
+
 .battle-types > image {
-  width: 100%;
-  height: 14vw;
+  width: 220rpx;
+  height: 108rpx;
 }
+
+.battle-types .first {
+  width: 220rpx;
+  height: 108rpx;
+  position: relative;
+}
+
+.battle-types .first > image {
+  width: 220rpx;
+  height: 108rpx;
+}
+
+.battle-types .first .star {
+  width: 94rpx;
+  height: 98rpx;
+  position: absolute;
+  left: -22rpx;
+  bottom: 0;
+}
+
 .data-progress {
   width: 100%;
   color: #b3b3b3;
@@ -473,25 +681,34 @@ onShow(async () => {
   margin-top: 15px;
   font-size: 14px;
 }
-.data-progress > view {
+
+.data-progress .data-name {
+  color: #ffffff;
+}
+
+.data-progress .data-progress-line {
   width: 100%;
   height: 5px;
   border-radius: 10px;
   background-color: #696969;
   margin-top: 10px;
 }
-.data-progress > view > view {
+
+.data-progress .data-progress-line > view {
+  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
   height: 5px;
   border-radius: 10px;
   transition: width 0.3s ease;
 }
-.ranking-my-data > view:last-child {
-  color: #39a8ff;
+
+.growth-btn {
+  color: #999999;
   font-size: 14px;
   text-align: center;
   width: 100%;
   padding-top: 15px;
 }
+
 .ranking-data > view:first-of-type {
   width: calc(100% - 30px);
   display: flex;
@@ -499,6 +716,7 @@ onShow(async () => {
   font-size: 15px;
   padding: 15px;
 }
+
 .ranking-data > view:first-of-type > view {
   width: 25%;
   text-align: center;
@@ -507,6 +725,7 @@ onShow(async () => {
   word-break: keep-all;
   line-height: 70rpx;
 }
+
 .rank-item {
   width: calc(100% - 30px);
   height: 55px;
@@ -515,6 +734,7 @@ onShow(async () => {
   justify-content: space-between;
   align-items: center;
 }
+
 .rank-item > view:first-child {
   width: 24px;
   height: 24px;
@@ -525,10 +745,12 @@ onShow(async () => {
   line-height: 24px;
   font-size: 14px;
 }
+
 .rank-item > image:first-child {
   width: 24px;
   height: 24px;
 }
+
 .rank-item > image:nth-child(2) {
   width: 35px;
   min-height: 35px;
@@ -536,30 +758,36 @@ onShow(async () => {
   border-radius: 50%;
   border: 1px solid transparent;
 }
+
 .rank-item > view:nth-child(3) {
   display: flex;
   flex-direction: column;
   width: 50%;
 }
+
 .rank-item > view:nth-child(3) > text:first-child {
   color: #fff9;
   font-size: 14px;
   width: 120px;
 }
+
 .rank-item > view:nth-child(3) > text:last-child {
   color: #fff4;
   font-size: 13px;
 }
+
 .rank-item > text:last-child {
   color: #fff;
   width: 56px;
   text-align: right;
 }
+
 .rank-item > text:last-child text {
   color: #fff4;
   font-size: 13px;
   margin-left: 3px;
 }
+
 .see-more {
   color: #39a8ff;
   font-size: 14px;
@@ -568,6 +796,7 @@ onShow(async () => {
   margin-top: 5px;
   margin-bottom: 10px;
 }
+
 .no-data {
   width: 100%;
   height: 200px;
@@ -576,32 +805,38 @@ onShow(async () => {
   align-items: center;
   color: #fff9;
 }
+
 .season-list {
   background-color: #000c;
   border-radius: 15px;
   color: #fff;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   font-size: 12px;
   padding: 5px 0;
   position: absolute;
   width: 220rpx;
+  height: auto;
+  max-height: 400rpx;
+  overflow: hidden;
+  overflow-y: auto;
   top: -44rpx;
   right: -30rpx;
   letter-spacing: 2px;
   z-index: 10;
+  text-align: center;
 }
+
 .season-list > view {
   display: flex;
   align-items: center;
   word-break: keep-all;
   padding: 20rpx 0;
 }
+
 .season-list > view > text {
   width: 140rpx;
   text-align: right;
 }
+
 .season-list > view > image {
   width: 24rpx;
   height: 24rpx;
@@ -609,19 +844,22 @@ onShow(async () => {
   min-height: 24rpx;
   margin-left: 20rpx;
 }
+
 .my-rank-score {
   position: absolute !important;
-  color: #fff;
+  color: #333333;
   width: 80px !important;
   display: flex;
   justify-content: center;
   top: -34px;
-  left: 27px;
+  left: 20px;
 }
+
 .my-rank-score > image {
   position: absolute;
   width: 100%;
 }
+
 .my-rank-score > text {
   position: relative;
   font-size: 10px !important;
diff --git a/src/static/app-bg.png b/src/static/app-bg.png
deleted file mode 100644
index 353f80e..0000000
Binary files a/src/static/app-bg.png and /dev/null differ
diff --git a/src/static/app-bg2.png b/src/static/app-bg2.png
deleted file mode 100644
index ede4d94..0000000
Binary files a/src/static/app-bg2.png and /dev/null differ
diff --git a/src/static/app-bg3.png b/src/static/app-bg3.png
deleted file mode 100644
index 0b13978..0000000
Binary files a/src/static/app-bg3.png and /dev/null differ
diff --git a/src/static/app-bg4.png b/src/static/app-bg4.png
deleted file mode 100644
index 6c4870c..0000000
Binary files a/src/static/app-bg4.png and /dev/null differ
diff --git a/src/static/app-bg5.png b/src/static/app-bg5.png
deleted file mode 100644
index f251413..0000000
Binary files a/src/static/app-bg5.png and /dev/null differ
diff --git a/src/static/battle-choose.png b/src/static/battle-choose.png
deleted file mode 100644
index b8913b6..0000000
Binary files a/src/static/battle-choose.png and /dev/null differ
diff --git a/src/static/battle10.png b/src/static/battle10.png
deleted file mode 100644
index 04455e3..0000000
Binary files a/src/static/battle10.png and /dev/null differ
diff --git a/src/static/battle1v1.png b/src/static/battle1v1.png
deleted file mode 100644
index b2b978a..0000000
Binary files a/src/static/battle1v1.png and /dev/null differ
diff --git a/src/static/battle2v2.png b/src/static/battle2v2.png
deleted file mode 100644
index f099af0..0000000
Binary files a/src/static/battle2v2.png and /dev/null differ
diff --git a/src/static/battle3v3.png b/src/static/battle3v3.png
deleted file mode 100644
index 93d5127..0000000
Binary files a/src/static/battle3v3.png and /dev/null differ
diff --git a/src/static/battle5.png b/src/static/battle5.png
deleted file mode 100644
index 57500bd..0000000
Binary files a/src/static/battle5.png and /dev/null differ
diff --git a/src/static/rank/battle-choose.png b/src/static/rank/battle-choose.png
new file mode 100644
index 0000000..439f27e
Binary files /dev/null and b/src/static/rank/battle-choose.png differ
diff --git a/src/static/rank/battle10.svg b/src/static/rank/battle10.svg
new file mode 100644
index 0000000..f441321
--- /dev/null
+++ b/src/static/rank/battle10.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <defs>
+        <linearGradient x1="50%" y1="1.43983214%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF7EAF" offset="0%"></stop>
+            <stop stop-color="#C36AFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="排位赛" transform="translate(-251.000000, -155.000000)">
+            <g id="编组-9" transform="translate(3.000000, 93.000000)">
+                <g id="编组-5" transform="translate(248.000000, 62.000000)">
+                    <g id="编组-4">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="52" cy="64.5" r="64"></circle>
+                        <rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
+                    </g>
+                    <text id="10人大乱斗" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="16" font-weight="bold" fill="#FFFFFF">
+                        <tspan x="15" y="32">10人大乱斗</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/static/rank/battle1v1.svg b/src/static/rank/battle1v1.svg
new file mode 100644
index 0000000..dc515c0
--- /dev/null
+++ b/src/static/rank/battle1v1.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="111px" height="54px" viewBox="0 0 111 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#896CFF" offset="0%"></stop>
+            <stop stop-color="#9754FF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="排位赛" transform="translate(-132.000000, -93.000000)">
+            <g id="编组-9" transform="translate(3.000000, 93.000000)">
+                <g id="编组-5" transform="translate(129.500000, 0.000000)">
+                    <g id="编组-4">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="55" cy="64.5" r="64"></circle>
+                        <rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(89.406727, 10.201587) rotate(51.000000) translate(-89.406727, -10.201587) " x="82.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
+                    </g>
+                    <g id="1v1备份" transform="translate(43.000000, 21.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                        <polygon id="路径" points="0 1.625 0 3.64722222 2.69090909 2.22083333 2.69090909 13 5 13 5 0 3.07272727 0"></polygon>
+                        <polygon id="路径" points="17 3 14.4705882 3 12.0196078 10.5384615 9.60784314 3 7 3 10.5490196 13 13.2941176 13"></polygon>
+                        <polygon id="路径" points="19 1.625 19 3.64722222 21.6909091 2.22083333 21.6909091 13 24 13 24 0 22.0727273 0"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/static/rank/battle2v2.svg b/src/static/rank/battle2v2.svg
new file mode 100644
index 0000000..5bf1e27
--- /dev/null
+++ b/src/static/rank/battle2v2.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#4A8CFF" offset="0%"></stop>
+            <stop stop-color="#669DFF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="排位赛" transform="translate(-251.000000, -93.000000)">
+            <g id="编组-9" transform="translate(3.000000, 93.000000)">
+                <g id="编组-5" transform="translate(248.000000, 0.000000)">
+                    <g id="编组-4">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
+                        <rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
+                    </g>
+                    <text id="2v2" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="18" font-weight="bold" fill="#FFFFFF">
+                        <tspan x="40.408" y="33">2v2</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/static/rank/battle3v3.svg b/src/static/rank/battle3v3.svg
new file mode 100644
index 0000000..24399e5
--- /dev/null
+++ b/src/static/rank/battle3v3.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="110px" height="54px" viewBox="0 0 110 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FF8787" offset="0%"></stop>
+            <stop stop-color="#FF9696" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="排位赛" transform="translate(-14.000000, -155.000000)">
+            <g id="编组-9" transform="translate(3.000000, 93.000000)">
+                <g id="编组-5" transform="translate(11.000000, 62.000000)">
+                    <g id="编组-4">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
+                        <rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
+                    </g>
+                    <text id="3v3" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="18" font-weight="bold" fill="#FFFFFF">
+                        <tspan x="40.408" y="33">3v3</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/static/rank/battle5.svg b/src/static/rank/battle5.svg
new file mode 100644
index 0000000..8cae378
--- /dev/null
+++ b/src/static/rank/battle5.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="111px" height="54px" viewBox="0 0 111 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 5</title>
+    <defs>
+        <linearGradient x1="50%" y1="3.4527039%" x2="50%" y2="99.6818489%" id="linearGradient-1">
+            <stop stop-color="#FFA052" offset="0%"></stop>
+            <stop stop-color="#FFBC4E" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="110" height="54" rx="8"></rect>
+        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </radialGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="训练功能改版" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="排位赛" transform="translate(-132.000000, -155.000000)">
+            <g id="编组-9" transform="translate(3.000000, 93.000000)">
+                <g id="编组-5" transform="translate(129.500000, 62.000000)">
+                    <g id="编组-4">
+                        <mask id="mask-3" fill="white">
+                            <use xlink:href="#path-2"></use>
+                        </mask>
+                        <use id="矩形" fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        <circle id="椭圆形" fill="url(#radialGradient-4)" mask="url(#mask-3)" cx="56" cy="64.5" r="64"></circle>
+                        <rect id="矩形" fill="url(#linearGradient-5)" opacity="0.100000001" mask="url(#mask-3)" transform="translate(85.406727, 10.201587) rotate(51.000000) translate(-85.406727, -10.201587) " x="78.4067275" y="-14.2984126" width="14" height="49" rx="7"></rect>
+                    </g>
+                    <text id="5人大乱斗" font-family="DOUYINSANSBOLD-GB, Douyin Sans" font-size="16" font-weight="bold" fill="#FFFFFF">
+                        <tspan x="18.976" y="32">5人大乱斗</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/static/rank/bubble-tip.png b/src/static/rank/bubble-tip.png
new file mode 100644
index 0000000..6e48ffe
Binary files /dev/null and b/src/static/rank/bubble-tip.png differ
diff --git a/src/static/rank/star.png b/src/static/rank/star.png
new file mode 100644
index 0000000..1ba3df3
Binary files /dev/null and b/src/static/rank/star.png differ
diff --git a/src/static/rank/triangle.png b/src/static/rank/triangle.png
new file mode 100644
index 0000000..8e3a660
Binary files /dev/null and b/src/static/rank/triangle.png differ
diff --git a/src/websocket.js b/src/websocket.js
index 8489783..ba202b3 100644
--- a/src/websocket.js
+++ b/src/websocket.js
@@ -14,8 +14,8 @@ function createWebSocket(token, onMessage) {
 
     switch (envVersion) {
       case "develop": // 开发版
-        url = "ws://localhost:8000/socket";
-        // url = "wss://apitest.shelingxingqiu.com/socket";
+        // url = "ws://localhost:8000/socket";
+        url = "wss://apitest.shelingxingqiu.com/socket";
         break;
       case "trial": // 体验版
         url = "wss://apitest.shelingxingqiu.com/socket";