添加UI

src/components/PlayerSeats.vue

@@ -77,7 +77,7 @@ const seats = new Array(props.total).fill(1);
 .founder {
   position: absolute;
   background-color: #fed847;
-  top: 0;
+  top: 6px;
   color: #000;
   font-size: 10px;
   padding: 2px 5px;

src/pages.json

@@ -98,6 +98,12 @@
     },
     {
       "path": "pages/ranking",
+      "style": {
+        "navigationBarTitleText": "排行赛"
+      }
+    },
+    {
+      "path": "pages/rank-list",
       "style": {
         "navigationBarTitleText": "排行榜"
       }

src/pages/battle-result.vue

@@ -282,12 +282,6 @@ onMounted(async () => {});
   top: 0;
   left: 0;
 }
-.player-bg {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
 .player-crown {
   position: relative;
   width: 27px;

src/pages/battle-room.vue

@@ -342,21 +342,6 @@ onUnmounted(() => {
   height: calc(100% - 40px);
   overflow-x: hidden;
 }
-.founder {
-  position: absolute;
-  background-color: #fed847;
-  top: 0;
-  color: #000;
-  font-size: 12px;
-  padding: 2px 5px;
-  border-top-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-.player-bg {
-  position: absolute;
-  width: 52px;
-  right: 0;
-}
 .tips {
   color: #fff9;
   width: 100%;

src/pages/index.vue

@@ -35,6 +35,12 @@ const toPage = (path) => {
   });
 };
 
+const toRankListPage = () => {
+  uni.navigateTo({
+    url: "rank-list",
+  });
+};
+
 onMounted(async () => {
   try {
     const deviceInfo = uni.getDeviceInfo();
@@ -117,7 +123,9 @@ onMounted(async () => {
               <view v-if="i > 3">{{ i }}</view>
               <image src="../static/avatar.png" mode="aspectFill" />
             </view>
-            <view class="more-players">4563</view>
+            <view class="more-players" @click.stop="toRankListPage"
+              ><text>4563</text></view
+            >
           </view>
         </view>
         <view class="region-stats">
@@ -300,8 +308,12 @@ onMounted(async () => {
   border: none;
   font-size: 10px;
   line-height: 40px;
-  text-align: right;
+  display: flex;
-  padding-right: 5px;
+  justify-content: flex-end;
+}
+
+.more-players > text {
+  margin-right: 4px;
 }
 
 .region-stats {

src/pages/rank-list.vue

@@ -0,0 +1,270 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import Avatar from "@/components/Avatar.vue";
+const isIos = ref(true);
+
+onMounted(() => {
+  const deviceInfo = uni.getDeviceInfo();
+  isIos.value = deviceInfo.osName === "ios";
+});
+
+const selectedIndex = ref(0);
+
+const handleSelect = (index) => {
+  selectedIndex.value = index;
+};
+
+const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
+</script>
+
+<template>
+  <view class="container">
+    <navigator
+      open-type="navigateBack"
+      class="back-btn"
+      :style="{ top: `${isIos ? 55 : 45}px` }"
+    >
+      <image src="../static/back.png" mode="widthFix" />
+    </navigator>
+    <image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
+    <view class="rank-tabs">
+      <view
+        v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜']"
+        :key="index"
+        :style="{
+          fontSize: index === selectedIndex ? '16px' : '14px',
+          color: index === selectedIndex ? '#000' : '#fff',
+          backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
+        }"
+        @tap="handleSelect(index)"
+      >
+        {{ rankType }}
+      </view>
+    </view>
+    <view class="rank-list">
+      <view class="rank-list-header">
+        <text>排名</text>
+        <text>用户ID</text>
+        <text>{{ subTitles[selectedIndex] }}</text>
+      </view>
+      <view
+        v-for="(_, index) in new Array(10).fill(1)"
+        :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="../static/avatar.png" />
+        <view class="rank-item-content">
+          <text>打酱油大声路过</text>
+          <text>钻石3级，20场</text>
+        </view>
+        <text class="rank-item-integral"
+          ><text
+            :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+            >9999</text
+          >分</text
+        >
+      </view>
+    </view>
+    <view class="my-rank-data">
+      <image src="../static/modal-content-bg.png" mode="widthFix" />
+      <text>123</text>
+      <Avatar src="../static/avatar.png" />
+      <view class="rank-item-content">
+        <text>打酱油大声路过</text>
+        <text>钻石3级，20场</text>
+      </view>
+      <text class="rank-item-integral"
+        ><text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
+          >9999</text
+        >分</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: relative;
+  padding-bottom: 100px;
+}
+.header-bg {
+  width: 100%;
+}
+.back-btn {
+  display: flex;
+  align-items: center;
+  position: absolute;
+}
+.back-btn > image {
+  width: 22px;
+  height: 22px;
+  margin: 0 10px;
+}
+.rank-tabs {
+  width: calc(100% - 20px);
+  display: flex;
+  justify-content: space-around;
+  padding: 0 10px;
+  margin-top: -15px;
+}
+.rank-tabs > view {
+  width: 25%;
+  padding: 10px;
+  text-align: center;
+  border-radius: 20px;
+}
+.rank-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(100% - 20px);
+  color: #fff9;
+  font-size: 12px;
+  margin: 10px;
+  border: 1px solid rgb(255 217 71 / 0.2);
+  border-radius: 10px;
+  background-color: #313131;
+}
+.rank-list > view {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  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%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.player-crown {
+  position: relative;
+  width: 27px;
+  margin: 0 15px;
+}
+.view-crown {
+  width: 27px;
+  height: 27px;
+  line-height: 27px;
+  text-align: center;
+  border-radius: 50%;
+  margin: 0 15px;
+  color: #fff;
+  background-color: #676767;
+  position: relative;
+}
+.rank-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 50%;
+  position: relative;
+  padding-left: 10px;
+}
+.rank-item-content > text:first-child {
+  color: #fff;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+.rank-list-item > text:last-child {
+  margin-right: 10px;
+}
+.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;
+}
+.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;
+  color: #fff;
+  padding: 3px 5px;
+  border-radius: 20px;
+  margin-right: 10px;
+  font-size: 14px;
+}
+.my-rank-data > text:last-child {
+  position: relative;
+  margin-right: 10px;
+}
+.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;
+}
+</style>

src/pages/ranking.vue

@@ -127,7 +127,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
           v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
           :key="index"
           :style="{
-            backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
+            backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
           }"
           class="rank-item"
         >