Web1020/12_vuecli/mediaapp/src/views/mine/MinePage.vue

<template>
  <div class="mine-container">
    <div class="header">
      <van-image
        round
        width="2.5rem"
        height="2.5rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <h3>昵称</h3>
    </div>
    <div class="nav">
      <van-cell-group inset>
        <van-cell title="我的成绩" size="large" is-link to="/score" icon="edit"/>
        <van-cell title="我的地址" size="large" is-link icon="location-o"/>
      </van-cell-group>
    </div>
  </div>
</template>
<style scoped>
.mine-container {
  background-color: #9bb771;
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  bottom: 1rem;
}
.header {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header h3 {
  font-size: 0.6rem;
}
</style>
<script>
export default {
  mounted() {
    this.$emit("changePage", "1004");
  },
};
</script>