UI优化

src/pages/ranking.vue

@@ -36,6 +36,16 @@ const toMeleeMatchPage = (gameType, teamSize) => {
     url: `/pages/melee-match?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
+const toMyGrowthPage = () => {
+  uni.navigateTo({
+    url: "/pages/my-growth",
+  });
+};
+const toRankListPage = () => {
+  uni.navigateTo({
+    url: "/pages/rank-list",
+  });
+};
 </script>
 
 <template>
@@ -101,7 +111,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
             <view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
           </view>
         </view>
-        <view>查看我的比赛记录</view>
+        <view @click="toMyGrowthPage">查看我的比赛记录</view>
       </view>
       <view class="ranking-data">
         <view>
@@ -143,6 +153,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
           <text>8850<text>分</text></text>
         </view>
       </view>
+      <view class="see-more" @click="toRankListPage">点击查看更多</view>
     </view>
   </Container>
 </template>
@@ -160,6 +171,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   border: 1px solid #54431d;
   border-radius: 10px;
   margin: 0 15px;
+}
+.ranking-my-data {
   margin-bottom: 15px;
 }
 .ranking-my-data {
@@ -318,4 +331,12 @@ const toMeleeMatchPage = (gameType, teamSize) => {
   font-size: 13px;
   margin-left: 3px;
 }
+.see-more {
+  color: #39a8ff;
+  font-size: 14px;
+  text-align: center;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
 </style>