使用vue+vant制作的一个个人信息展示页面

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="个人信息" />
  <!-- 用户头像区域 -->
  <div class="top">
    <van-image
      round   // 圆角样式
      width="10rem"
      height="10rem"
      fit="cover"   // 图片拉伸方式为覆盖
      position="center"   // 居中对齐
      :src="user.avatar"  // 通过数据动态绑定用户头像地址
    />
  </div>
  <!-- 使用列表显示用户信息 -->
  <van-cell-group>
    <van-cell title="用户名" :value="user.username" />
    <van-cell title="角色" :value="user.role" />
    <van-cell title="年级" :value="user.grade + '年级'" />   <!-- 在年级上添加“年级”文字 -->
  </van-cell-group>
  <van-card-footer class="card-footer">{{ message }}</van-card-footer>
</template>
<script>
export default {
  data() {
    return {
      user: {
        id: 1,                                   // 用户 ID
        username: "zhangsan",                     // 用户名
        password: "123456",                       // 密码（仅用于演示，实际应用中应该使用安全的密码机制）
        avatar: "https://tse4-mm.cn.bing.net/th/id/OIP-C.lUXUqc48bFDvTQ-M4zdzUQHaE0?w=278&h=180&c=7&r=0&o=5&dpr=1.8&pid=1.7",  // 用户头像地址
        grade: 8,                                 // 年级
        role: "student"                           // 角色
      },
      message: '更多详细信息，请联系管理员获取'   // 可自定义底部提示信息
    };
  },
};
</script>
<style scoped>
.top {
  display: flex;            
  justify-content: center;   /* 水平居中 */
}
.card-footer {
  text-align: right;
  font-size: 14px;
  color: #999;
}
</style>