shoot-miniprograms/src/pages/user.vue

<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>
    <AppBackground />
    <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>
.container {
  background-color: #e4e4e4;
  height: calc(100vh - 161px);
  margin-top: 20px;
  padding-top: 10px;
}
.my-grow {
  width: 100%;
}
.my-grow > image {
  width: 100%;
}
</style>