diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..545ebd3
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <view class="container">
+    <navigator open-type="navigateBack" class="back-btn">
+      <image src="../static/back.png" mode="widthFix" />
+    </navigator>
+    <text>{{ title }}</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 72vw;
+  height: 60px;
+  padding-left: 15px;
+  padding-top: 36px;
+}
+.back-btn {
+  display: flex;
+  align-items: center;
+}
+.back-btn > image {
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
+}
+.container > text {
+  color: #fff;
+}
+</style>
diff --git a/src/components/UserHeader.vue b/src/components/UserHeader.vue
new file mode 100644
index 0000000..823f67e
--- /dev/null
+++ b/src/components/UserHeader.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed } from "vue";
+const props = defineProps({
+  showRank: {
+    type: Boolean,
+    default: false,
+  },
+});
+const userInfo = ref({
+  name: "打酱油·路过",
+  level: "L100",
+  rank: 1928,
+  rankTotal: 1320,
+});
+const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
+const toUserPage = () => {
+  // 获取当前页面路径
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  
+  // 如果当前不是用户页面才进行跳转
+  if (currentPage.route !== 'pages/user') {
+    uni.navigateTo({
+      url: "/pages/user",
+    });
+  }
+};
+</script>
+
+<template>
+  <view class="container" :style="{ width: containerWidth }">
+    <view class="avatar" @click="toUserPage">
+      <image src="../static/avatar-frame.png" mode="widthFix" />
+      <image src="../static/avatar.png" mode="widthFix" />
+    </view>
+    <view class="user-details">
+      <view class="user-name">
+        <text>{{ containerWidth }}</text>
+        <image src="../static/vip1.png" mode="widthFix" />
+      </view>
+      <view class="user-stats">
+        <text class="level-tag">钻石1级</text>
+        <text class="level-tag">{{ userInfo.level }}</text>
+        <view class="rank-tag">
+          <view :style="{ width: '40%' }" />
+          <text>158/1928</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="showRank === true" class="rank-info">
+      <image src="../static/global-rank.png" mode="widthFix" />
+      <text>本赛季全国</text>
+      <text class="rank-number"
+        >第<text :style="{ color: '#ffd700' }"
+          >{{ userInfo.rank }}/{{ userInfo.rankTotal }}</text
+        >名</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  width: 72vw;
+  padding-left: 15px;
+  color: #fff;
+}
+
+.avatar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar > image:first-child {
+  position: absolute;
+  width: 55px;
+  height: 55px;
+}
+
+.avatar > image {
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+}
+
+.user-name {
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+}
+
+.user-name > image {
+  margin-left: 5px;
+  width: 24px;
+}
+
+.user-stats {
+  display: flex;
+  gap: 5px;
+}
+
+.level-tag {
+  text-align: center;
+  line-height: 16px;
+}
+.level-tag:first-child {
+  width: 45px;
+  background: #5f51ff;
+}
+.level-tag:nth-child(2) {
+  width: 30px;
+  background: #09c504;
+}
+
+.level-tag,
+.rank-tag {
+  border-radius: 12px;
+  font-size: 10px;
+}
+
+.rank-tag {
+  position: relative;
+  background-color: #00000038;
+  width: 56px;
+  height: 16px;
+}
+
+.rank-tag > view:first-child {
+  background: #ffa711;
+  height: 100%;
+  border-radius: 12px;
+}
+
+.rank-tag > text {
+  position: absolute;
+  top: 0;
+  left: 5px;
+  line-height: 16px;
+}
+
+.rank-info {
+  text-align: left;
+  font-size: 10px;
+  position: relative;
+  color: #b3b3b3;
+  padding-left: 8px;
+}
+
+.rank-info > image {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  width: 90px;
+}
+
+.rank-number {
+  display: block;
+}
+</style>
diff --git a/src/components/UserItem.vue b/src/components/UserItem.vue
new file mode 100644
index 0000000..c9828d1
--- /dev/null
+++ b/src/components/UserItem.vue
@@ -0,0 +1,67 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  customStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<template>
+  <view class="user-item" :style="customStyle">
+    <text>{{ title }}</text>
+    <view>
+      <text>{{ value }}</text>
+      <button>
+        <image src="../static/enter.png" mode="widthFix" />
+      </button>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.user-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  height: 55px;
+  border-bottom: 1px solid #f5f5f5;
+}
+.user-item > text {
+  margin-left: 15px;
+  font-size: 14px;
+}
+.user-item > view {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  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;
+  height: 24px;
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ca98564..579d37b 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
+import UserHeader from "@/components/UserHeader.vue";
 
 const userInfo = ref({
   name: "打酱油·路过",
@@ -10,11 +11,6 @@ const userInfo = ref({
   rankTotal: 1320,
 });
 
-const toUserPage = () => {
-  uni.navigateTo({
-    url: "/pages/user",
-  });
-};
 const toFristTryPage = () => {
   uni.navigateTo({
     url: "/pages/first-try",
@@ -35,36 +31,7 @@ const toFriendBattlePage = () => {
 <template>
   <view class="root-container">
     <AppBackground />
-    <!-- 用户信息区 -->
-    <view class="user-info">
-      <view class="avatar" @click="toUserPage">
-        <image src="../static/avatar-frame.png" mode="widthFix" />
-        <image src="/static/avatar.png" mode="widthFix" />
-      </view>
-      <view class="user-details">
-        <view class="user-name">
-          <text>{{ userInfo.name }}</text>
-          <image src="../static/vip1.png" mode="widthFix" />
-        </view>
-        <view class="user-stats">
-          <text class="level-tag">钻石1级</text>
-          <text class="level-tag">{{ userInfo.level }}</text>
-          <view class="rank-tag">
-            <view :style="{ width: '40%' }" />
-            <text>158/1928</text>
-          </view>
-        </view>
-      </view>
-      <view class="rank-info">
-        <image src="../static/global-rank.png" mode="widthFix" />
-        <text>本赛季全国</text>
-        <text class="rank-number"
-          >第<text :style="{ color: '#ffd700' }"
-            >{{ userInfo.rank }}/{{ userInfo.rankTotal }}</text
-          >名</text
-        >
-      </view>
-    </view>
+    <UserHeader showRank />
 
     <view class="container">
       <!-- 功能区域 -->
@@ -165,119 +132,13 @@ const toFriendBattlePage = () => {
 
 <style scoped>
 .root-container {
-  height: 100vh;
+  height: calc(100vh - 45px);
   color: white;
   position: relative;
+  padding-top: 45px;
 }
 
 /* 用户信息样式 */
-.user-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  width: 72vw;
-  height: 90px;
-  padding-left: 15px;
-}
-
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.avatar > image:first-child {
-  position: absolute;
-  width: 55px;
-  height: 55px;
-}
-
-.avatar > image {
-  width: 45px;
-  height: 45px;
-  border-radius: 50%;
-}
-
-.user-details {
-  display: flex;
-  flex-direction: column;
-  padding-left: 5px;
-}
-
-.user-name {
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.user-name > image {
-  margin-left: 5px;
-  width: 24px;
-}
-
-.user-stats {
-  display: flex;
-  gap: 5px;
-}
-
-.level-tag {
-  text-align: center;
-  line-height: 16px;
-}
-.level-tag:first-child {
-  width: 45px;
-  background: #5f51ff;
-}
-.level-tag:nth-child(2) {
-  width: 36px;
-  background: #09c504;
-}
-
-.level-tag,
-.rank-tag {
-  border-radius: 12px;
-  font-size: 10px;
-}
-
-.rank-tag {
-  position: relative;
-  background-color: #00000038;
-  width: 56px;
-  height: 16px;
-}
-
-.rank-tag > view:first-child {
-  background: #ffa711;
-  height: 100%;
-  border-radius: 12px;
-}
-
-.rank-tag > text {
-  position: absolute;
-  top: 0;
-  left: 5px;
-  line-height: 16px;
-}
-
-.rank-info {
-  text-align: left;
-  font-size: 10px;
-  position: relative;
-  padding: 5px;
-  color: #b3b3b3;
-}
-
-.rank-info > image {
-  position: absolute;
-  top: -4px;
-  left: -12px;
-  width: 112%;
-}
-
-.rank-number {
-  display: block;
-}
 
 .container {
   height: calc(100vh - 220px);
diff --git a/src/pages/user.vue b/src/pages/user.vue
index 0758e9a..3012fb2 100644
--- a/src/pages/user.vue
+++ b/src/pages/user.vue
@@ -1,102 +1,62 @@
 <script setup>
 import AppBackground from "@/components/AppBackground.vue";
+import Header from "@/components/Header.vue";
+import UserHeader from "@/components/UserHeader.vue";
+import UserItem from "@/components/UserItem.vue";
 </script>
 
 <template>
-  <view class="user-container">
+  <view>
     <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" />
-      </view>
-      <text class="username">用户名</text>
-    </view>
-    <view class="user-info">
-      <view class="info-item">
-        <text class="label">ID</text>
-        <text class="value">10001</text>
-      </view>
-      <view class="info-item">
-        <text class="label">注册时间</text>
-        <text class="value">2024-01-01</text>
-      </view>
+    <Header title="用户信息" />
+    <UserHeader />
+    <view class="container">
+      <UserItem title="用户名" />
+      <UserItem title="头像" />
+      <UserItem
+        title="订单"
+        :customStyle="{
+          marginTop: '10px',
+        }"
+      />
+      <UserItem title="新手试炼场" />
+      <UserItem title="会员" />
+      <UserItem title="等级介绍" />
+      <UserItem
+        title="段位介绍"
+        :customStyle="{
+          marginBottom: '10px',
+        }"
+      />
+      <button class="my-grow">
+        <image src="../static/my-grow.png" mode="widthFix" />
+      </button>
     </view>
   </view>
 </template>
 
 <style scoped>
-.user-container {
-  padding: 2rem;
+.container {
+  background-color: #e4e4e4;
+  height: calc(100vh - 161px);
+  margin-top: 20px;
+  padding-top: 10px;
 }
-
-.user-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 2rem;
-}
-
-.avatar-box {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  overflow: hidden;
-  margin-bottom: 1rem;
-}
-
-.avatar {
+.my-grow {
   width: 100%;
-  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: none;
+  border: none;
+  background: none;
+  line-height: 1;
+  outline: none;
+  box-sizing: border-box;
 }
-
-.username {
-  font-size: 1.2rem;
-  font-weight: bold;
+.my-grow::after {
+  border: none;
 }
-
-.user-info {
-  background-color: #ffffff;
-  border-radius: 10px;
-  padding: 1rem;
-}
-
-.info-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.8rem 0;
-  border-bottom: 1px solid #eee;
-}
-
-.info-item:last-child {
-  border-bottom: none;
-}
-
-.label {
-  color: #666;
-}
-
-.value {
-  color: #333;
-}
-
-.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;
+.my-grow > image {
+  width: 100%;
 }
 </style>
diff --git a/src/static/back.png b/src/static/back.png
new file mode 100644
index 0000000..b981981
Binary files /dev/null and b/src/static/back.png differ
diff --git a/src/static/enter.png b/src/static/enter.png
new file mode 100644
index 0000000..0c952a3
Binary files /dev/null and b/src/static/enter.png differ
diff --git a/src/static/my-grow.png b/src/static/my-grow.png
new file mode 100644
index 0000000..fdef091
Binary files /dev/null and b/src/static/my-grow.png differ