添加页面文件

src/components/AppBackground.vue

@@ -12,7 +12,7 @@
   height: 100%;
   left: 0;
   top: 0;
-  z-index: 0;
+  z-index: -1;
 }
 
 .bg-image {

src/pages.json

@@ -3,8 +3,31 @@
     {
       "path": "pages/index",
       "style": {
-        "navigationBarTitleText": "首页",
+        "navigationBarTitleText": "首页"
-        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/user",
+      "style": {
+        "navigationBarTitleText": "用户信息"
+      }
+    },
+    {
+      "path": "pages/ranking",
+      "style": {
+        "navigationBarTitleText": "排行榜"
+      }
+    },
+    {
+      "path": "pages/first-try",
+      "style": {
+        "navigationBarTitleText": "新手试炼"
+      }
+    },
+    {
+      "path": "pages/friend-battle",
+      "style": {
+        "navigationBarTitleText": "好友约战"
       }
     }
   ],

src/pages/first-try.vue

@@ -0,0 +1,33 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <navigator
+      open-type="navigateBack"
+      hover-class="back-hover"
+      class="back-btn"
+      >返回</navigator
+    >
+    <text>新手试炼</text>
+  </view>
+</template>
+
+<style scoped>
+.back-btn {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 1rem;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.back-hover {
+  opacity: 0.8;
+}
+</style>

src/pages/friend-battle.vue

@@ -0,0 +1,33 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <navigator
+      open-type="navigateBack"
+      hover-class="back-hover"
+      class="back-btn"
+      >返回</navigator
+    >
+    <text>好友约战</text>
+  </view>
+</template>
+
+<style scoped>
+.back-btn {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 1rem;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.back-hover {
+  opacity: 0.8;
+}
+</style>

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;

src/pages/ranking.vue

@@ -0,0 +1,33 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <navigator
+      open-type="navigateBack"
+      hover-class="back-hover"
+      class="back-btn"
+      >返回</navigator
+    >
+    <text>排行榜</text>
+  </view>
+</template>
+
+<style scoped>
+.back-btn {
+  position: fixed;
+  top: 2rem;
+  left: 2rem;
+  padding: 0.5rem 1rem;
+  background-color: #007aff;
+  color: #fff;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.back-hover {
+  opacity: 0.8;
+}
+</style>

src/pages/user.vue

@@ -1,10 +1,16 @@
 <script setup>
-
+import AppBackground from "@/components/AppBackground.vue";
 </script>
 
 <template>
   <view class="user-container">
-    <navigator open-type="navigateBack" hover-class="back-hover" class="back-btn">返回</navigator>
+    <AppBackground />
+    <navigator
+      open-type="navigateBack"
+      hover-class="back-hover"
+      class="back-btn"
+      >返回</navigator
+    >
     <view class="user-header">
       <view class="avatar-box">
         <image class="avatar" src="/static/avatar.png" mode="aspectFill" />
@@ -84,7 +90,7 @@
   top: 2rem;
   left: 2rem;
   padding: 0.5rem 1rem;
-  background-color: #007AFF;
+  background-color: #007aff;
   color: #fff;
   border-radius: 5px;
   font-size: 14px;
@@ -93,4 +99,4 @@
 .back-hover {
   opacity: 0.8;
 }
-</style>
+</style>