添加页面文件

src/pages/index.vue

@@ -9,6 +9,27 @@ const userInfo = ref({
   rank: 1928,
   rankTotal: 1320,
 });
+
+const toUserPage = () => {
+  uni.navigateTo({
+    url: "/pages/user",
+  });
+};
+const toFristTryPage = () => {
+  uni.navigateTo({
+    url: "/pages/first-try",
+  });
+};
+const toRankingPage = () => {
+  uni.navigateTo({
+    url: "/pages/ranking",
+  });
+};
+const toFriendBattlePage = () => {
+  uni.navigateTo({
+    url: "/pages/friend-battle",
+  });
+};
 </script>
 
 <template>
@@ -16,7 +37,7 @@ const userInfo = ref({
     <AppBackground />
     <!-- 用户信息区 -->
     <view class="user-info">
-      <view class="avatar">
+      <view class="avatar" @click="toUserPage">
         <image src="../static/avatar-frame.png" mode="widthFix" />
         <image src="/static/avatar.png" mode="widthFix" />
       </view>
@@ -52,7 +73,11 @@ const userInfo = ref({
         <view class="bow-card">
           <image src="../static/bow-bg.png" mode="widthFix" />
           <text>我的弓箭</text>
-          <image src="../static/a2@2x.png" mode="widthFix" />
+          <image
+            src="../static/a2@2x.png"
+            mode="widthFix"
+            @click="toFristTryPage"
+          />
         </view>
 
         <!-- 个人练习区域 -->
@@ -61,13 +86,13 @@ const userInfo = ref({
         </view>
 
         <!-- 好友约战区域 -->
-        <view class="friend-card">
+        <view class="friend-card" @click="toFriendBattlePage">
           <image src="../static/a3@2x.png" mode="widthFix" />
         </view>
       </view>
 
       <!-- 排位赛区域 -->
-      <view class="ranking-section">
+      <view class="ranking-section" @click="toRankingPage">
         <image src="../static/a4@2x.png" mode="widthFix" />
         <view class="ranking-players">
           <img src="../static/juezhanbang.png" mode="widthFix" />
@@ -145,14 +170,6 @@ const userInfo = ref({
   position: relative;
 }
 
-/* 确保其他内容在背景上层显示 */
-.user-info,
-.container,
-.AppFooter {
-  position: relative;
-  z-index: 1;
-}
-
 /* 用户信息样式 */
 .user-info {
   display: flex;