完成用户页面UI

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>