uniapp个人主页页面设计

以下是一个简单的uniapp个人主页页面设计的例子：

<template>
  <view class="container">
    <view class="header">
      <image class="avatar" src="../../static/avatar.jpg"></image>
      <view class="info">
        <text class="name">用户名</text>
        <text class="desc">个人简介</text>
      </view>
    </view>
    <view class="content">
      <view class="item" @click="toMyPosts">
        <text class="title">我的帖子</text>
        <text class="count">10</text>
      </view>
      <view class="item" @click="toMyComments">
        <text class="title">我的评论</text>
        <text class="count">20</text>
      </view>
      <view class="item" @click="toMyFavorites">
        <text class="title">我的收藏</text>
        <text class="count">5</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    toMyPosts() {
      // 跳转到我的帖子页面
    },
    toMyComments() {
      // 跳转到我的评论页面
    },
    toMyFavorites() {
      // 跳转到我的收藏页面
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.desc {
  font-size: 16px;
  color: #999;
}

.content {
  width: 100%;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
}

.count {
  font-size: 16px;
  color: #999;
}
</style>

该页面包含一个头部和一个内容区域。头部包含用户头像、用户名和个人简介，内容区域包含三个条目，分别是我的帖子、我的评论和我的收藏。点击每个条目可以跳转到对应的页面。