uniapp制作一个个人页面

1.成果展示

2.uniapp代码

<template>  
  <view class="profile-container">  
    <view class="avatar-info">  
      <image class="avatar" src="../../static/tabs/头像.png" mode="aspectFill"></image>  
      <text class="nickname">{{ nickname }}</text>  
    </view>  
    <view class="links">  
      <view class="link-item" @click="navigateToaboutUs">  
        <view class="item-content">  
          <image src="../../static/tabs/aboutUs.png" class="icon" mode="widthFix"></image>  
          <text>关于我们</text>  
          <image src="../../static/tabs/arrow.png" class="arrow" />  
        </view>  
      </view>  
      <view class="link-item" @click="navigateTojoinUs">  
        <view class="item-content">  
          <image src="../../static/tabs/joinUs.png" class="icon" mode="widthFix"></image>  
          <text>加入我们</text>  
          <image src="../../static/tabs/arrow.png" class="arrow" />  
        </view>  
      </view>  
      <view class="link-item" @click="navigateTousage">  
        <view class="item-content">  
          <image src="../../static/tabs/usage.png" class="icon" mode="widthFix"></image>  
          <text>使用方法</text>  
          <image src="../../static/tabs/arrow.png" class="arrow" />  
        </view>  
      </view>  
      <view class="link-item" @click="navigateTofeedback">  
        <view class="item-content">  
          <image src="../../static/tabs/feedback.png" class="icon" mode="widthFix"></image>  
          <text>意见反馈</text>  
          <image src="../../static/tabs/arrow.png" class="arrow" />  
        </view>  
      </view>  
    </view>  
    <view class="link-item version-item">  
      <text class="version">版本：v1.0.0</text>  
      <!-- 这里不需要跳转箭头，所以只添加了一个简单的文本 -->  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      nickname: '民族一家亲'  
    };  
  },  
  methods: {  
    navigateToaboutUs() {  
      uni.navigateTo({  
        url: "/pageA/contact/aboutUs"
      })
    },
	navigateTojoinUs() {
	  uni.navigateTo({  
	    url: "/pageA/contact/joinUs"
	  })
	},
	navigateTousage() {
	  uni.navigateTo({  
	    url: "/pageA/contact/usage"
	  })
	},
	navigateTofeedback() {
	  uni.navigateTo({  
	    url: "/pageA/contact/feedback"
	  })
	},  
  }  
}  
</script>  
<style scoped>  
.profile-container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 20px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选，为整个容器添加阴影效果 */  
  background-color: #fff; /* 设置背景颜色 */  
  border-radius: 8px; /* 圆角边框 */  
  margin-top: 20px; /* 与页面顶部保持一定距离 */  
}  

.avatar-info {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  margin-bottom: 20px; /* 与下面的链接保持一定距离 */  
}  
  
.avatar {  
  width: 100px;  
  height: 100px;  
  border-radius: 50%; /* 圆形头像 */  
  border: 2px solid #fff; /* 可选，边框颜色 */  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 头像阴影效果 */  
  margin-bottom: 10px; /* 与昵称保持一定距离 */  
}  
  
.nickname {  
  font-size: 16px;  
  color: #333;  
  font-weight: bold; /* 昵称加粗 */  
}  
  
.links {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  width: 100%; /* 如果需要，可以限制链接列表的宽度 */  
}  
  
.link-item {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px; /* 每个链接项之间的间距 */  
  width: 100%; /* 链接项宽度 */  
  background-color: #f5f5f5; /* 背景色，可选 */  
  padding: 10px; /* 内边距 */  
  border-radius: 4px; /* 圆角 */  
}  
  
.item-content {  
  display: flex;  
  align-items: center;  
  justify-content: space-between; /* 图标、文本和箭头之间的间距 */  
  width: 100%;  
}  
  
.icon {  
  width: 30px;  
  height: 30px;  
  margin-right: -14px; /* 图标与文本之间的间距，可以根据需要调整 */  
}  
  
.arrow {  
  width: 15px;  
  height: 15px;  
  /* 其他样式，如transform: rotate(...)可以根据需要添加 */  
}
  
.version-item {  
  display: flex;  
  align-items: center;  
 justify-content: center; 
  margin-top: 20px; /* 与上面的链接列表保持一定距离 */  
  font-size: 14px;  
  color: #666;  
}  
</style>

3.注意事项

(1)代码是正确的，没有问题，需要自己根据需要替换图标、头像等；

(2)如果有什么uniapp上的问题，欢迎评论区留言。