添加个人联系页面

src/App.vue

@@ -1,7 +1,27 @@
 <script setup>
-import { onLaunch } from '@dcloudio/uni-app'
+import { onLaunch } from "@dcloudio/uni-app";
 
-onLaunch(() => {})
+onLaunch(() => {});
 </script>
 
-<style></style>
+<style>
+button {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  line-height: 1;
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* 去除按钮点击时的默认效果 */
+button::after {
+  border: none;
+}
+
+/* 去除按钮的默认边框 */
+button[plain] {
+  border: none;
+}
+</style>

src/components/InputEntry.vue

@@ -1,47 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-const name = ref("");
-const show = ref(false);
-
-function handleClick() {
-  show.value = true;
-  setTimeout(() => {
-    show.value = false;
-  }, 3000);
-}
-</script>
-
-<template>
-  <view>
-    <view class="input-box">
-      <input v-model="name" placeholder="What's your name?" />
-    </view>
-    <view>
-      <button :disabled="!name" @click="handleClick">Hello</button>
-    </view>
-
-    <view v-show="show" class="popup">
-      <text class="popup_label"> Hello{{ `  ${name}` }} 👏 </text>
-    </view>
-  </view>
-</template>
-
-<style scoped lang="scss">
-.input-box {
-  margin: 1rem;
-  padding: 0.5rem;
-  border-bottom: 1px solid gray;
-}
-.popup {
-  position: fixed;
-  top: 2rem;
-  left: 0px;
-  right: 0px;
-  .popup_label {
-    padding: 0.5rem 2rem;
-    background: gray;
-    border-radius: 8px;
-  }
-}
-</style>

src/components/UserItem.vue

@@ -47,18 +47,6 @@ defineProps({
   color: #999;
   margin-right: 10px;
 }
-.user-item > view button {
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  line-height: 1;
-  outline: none;
-  box-sizing: border-box;
-}
-.user-item > view button::after {
-  border: none;
-}
 
 .user-item > view image {
   width: 24px;

src/pages.json

@@ -12,23 +12,29 @@
         "navigationBarTitleText": "用户信息"
       }
     },
-    {
-      "path": "pages/ranking",
-      "style": {
-        "navigationBarTitleText": "排行榜"
-      }
-    },
     {
       "path": "pages/first-try",
       "style": {
         "navigationBarTitleText": "新手试炼"
       }
     },
+    {
+      "path": "pages/practise",
+      "style": {
+        "navigationBarTitleText": "个人练习"
+      }
+    },
     {
       "path": "pages/friend-battle",
       "style": {
         "navigationBarTitleText": "好友约战"
       }
+    },
+    {
+      "path": "pages/ranking",
+      "style": {
+        "navigationBarTitleText": "排行榜"
+      }
     }
   ],
   "globalStyle": {

src/pages/first-try.vue

@@ -23,10 +23,11 @@ import Guide from "@/components/Guide.vue";
 }
 .start-btn {
   margin: 0 10px;
+  padding: 15px 0;
+  font-weight: bold;
   width: calc(100% - 20px);
   background-color: #fed847;
   font-size: 15px;
-  padding: 3px;
   border-radius: 10px;
 }
 </style>

src/pages/friend-battle.vue

@@ -61,10 +61,12 @@ import Guide from "@/components/Guide.vue";
   width: 70%;
   text-align: center;
   font-size: 14px;
+  height: 40px;
 }
 .founded-room > view > button {
   background-color: #fed847;
   width: 30%;
+  line-height: 40px;
   border-radius: 30px;
   font-size: 14px;
   padding: 3px 0;
@@ -84,7 +86,6 @@ import Guide from "@/components/Guide.vue";
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
 }
 .create-room > view > image:first-child {
   width: 18vw;
@@ -110,8 +111,10 @@ import Guide from "@/components/Guide.vue";
 .create-room > button {
   background-color: #fed847;
   border-radius: 30px;
+  margin: 0 auto;
   width: 70%;
   font-size: 15px;
   transform: translateY(-110%);
+  padding: 15px 0;
 }
 </style>

src/pages/index.vue

@@ -26,6 +26,12 @@ const toFriendBattlePage = () => {
     url: "/pages/friend-battle",
   });
 };
+
+const toPractisePage = () => {
+  uni.navigateTo({
+    url: "/pages/practise",
+  });
+};
 </script>
 
 <template>
@@ -48,7 +54,7 @@ const toFriendBattlePage = () => {
         </view>
 
         <!-- 个人练习区域 -->
-        <view class="practice-card">
+        <view class="practice-card" @click="toPractisePage">
           <image src="../static/a2@2x(1).png" mode="widthFix" />
         </view>
 

src/pages/practise.vue

@@ -0,0 +1,31 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import Guide from "@/components/Guide.vue";
+</script>
+
+<template>
+  <view>
+    <AppBackground />
+    <Header title="个人练习" />
+    <Guide
+      title="师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！"
+    />
+    <button class="practise1">
+      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
+    </button>
+    <button class="practise2">
+      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.practise1 {
+  width: 100%;
+  margin: 20px 0;
+}
+.practise2 {
+  width: 100%;
+}
+</style>

src/pages/user.vue

@@ -44,17 +44,6 @@ import UserItem from "@/components/UserItem.vue";
 }
 .my-grow {
   width: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: none;
-  border: none;
-  background: none;
-  line-height: 1;
-  outline: none;
-  box-sizing: border-box;
-}
-.my-grow::after {
-  border: none;
 }
 .my-grow > image {
   width: 100%;