UI开发

src/pages/ranking.vue

@@ -1,13 +1,19 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const selectedIndex = ref(0);
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
 };
+
+const toMatchPage = () => {
+  uni.navigateTo({
+    url: "/pages/match-room",
+  });
+};
 </script>
 
 <template>
@@ -43,9 +49,21 @@ const handleSelect = (index) => {
         </view>
       </view>
       <view class="rank-type">
-        <image src="../static/battle1v1.png" mode="widthFix" />
-        <image src="../static/battle5.png" mode="widthFix" />
-        <image src="../static/battle10.png" mode="widthFix" />
+        <image
+          src="../static/battle1v1.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle5.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
+        <image
+          src="../static/battle10.png"
+          mode="widthFix"
+          @click="toMatchPage"
+        />
       </view>
       <view class="data-progress">
         <text>【1 V 1】 163 场 胜率 51%</text>
@@ -74,9 +92,10 @@ const handleSelect = (index) => {
           :key="index"
           :style="{
             color: index === selectedIndex ? '#000' : '#fff',
-            backgroundColor: index === selectedIndex ? '#FFD947' : 'transparent',
+            backgroundColor:
+              index === selectedIndex ? '#FFD947' : 'transparent',
           }"
-           @tap="handleSelect(index)"
+          @tap="handleSelect(index)"
         >
           {{ rankType }}
         </view>