<template>
  <div class="app-container">
    <div class="main">
      <div class="center">
        <div class="info_text">个人信息</div>
        <div class="info">
          <div>用户昵称</div>
          <div style="margin-left: 40px">
            <img
              src="https://upload-bbs.mihoyo.com/upload/2021/03/21/184509926/b0eabac966513ab4dd30b6be6b1fe24b_7620507583700315542.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg"
              style="width: 50px; height: 50px; border-radius: 50px"
              alt=""
            />
          </div>
        </div>
        <div class="info">
          <div>用户头像</div>
          <div style="margin-left: 40px">{{ data.name }}</div>
        </div>
        <div class="info">
          <div>手机号</div>
          <div style="margin-left: 60px">{{ data.name }}</div>
        </div>
        <div
          class="btn"
          @click="
            $router.push({
              path: 'editUser',
            })
          "
        >
          编辑
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        name: "张三",
      },
    };
  },
  created() {
    document.title = "个人信息";
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  width: 100%;
  // background-color: white;
}
.main {
  background-color: white;
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  overflow-y: auto;
}
.center {
  padding: 36px 48px;
  font-size: 20px;
}
.info_text {
  font-size: 30px;
  font-weight: bold;
}
.info {
  margin-top: 40px;
  display: flex;
  align-items: center;
  // justify-content: space-between;
}
.btn {
  width: 100px;
  height: 40px;
  border: 1px solid #ec7c00;
  margin-top: 100px;
  font-size: 14px;
  color: #ec7c00;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}
</style>
