<template>
  <div class="myProfile_main">
    <div class="title_main" @click="skip('/sunVillage/user/index')">
      <div class="return_icon"></div>
      <div class="title">我的资料</div>
    </div>
    <div class="form_main">
      <div class="flex_block">
        <div class="title">姓名</div>
        <div class="wrap">
          <input type="text" class="ipt" placeholder="请输入姓名" />
        </div>
      </div>
      <div class="flex_block">
        <div class="title">身份证</div>
        <div class="wrap">
          <input type="text" class="ipt" placeholder="请输入身份证号" />
        </div>
      </div>
      <div class="flex_block">
        <div class="title">密码</div>
        <div class="wrap">
          <input type="password" class="ipt" placeholder="请输入现有密码" />
        </div>
      </div>
      <div class="flex_block">
        <div class="title">新密码</div>
        <div class="wrap">
          <input type="text" class="ipt" placeholder="请输入新密码" />
        </div>
      </div>
    </div>
    <div class="form_submit">
      <div class="complete_btn">完成</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myProfileVisibile: false,
    };
  },
  mounted() {},
  methods: {
    skip(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style scoped lang="scss">
.myProfile_main {
  width: 100vw;
  height: 100vh;
  background: #fff;
  .title_main {
    display: flex;
    height: 90px;
    margin: 0 24px;
    align-items: center; /*  子元素相对父元素垂直居中 */
    border-bottom: 1px solid #e5e5e5;
    .return_icon {
      width: 16px;
      height: 26px;
      background: url("../../../assets/images/sunVillage/headings_return.png")
        no-repeat;
      background-size: 100% 100%;
      margin-right: 16px;
      margin-left: 8px;
    }
    .title {
      font-size: 32px;
    }
  }
  .form_main {
    margin: 20px 57px 0;
    .flex_block {
      height: 112px;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      margin-bottom: 20px;
      .title {
        width: 154px;
        font-size: 34px;
        border-right: 1px solid #e6e6e6;
        display: flex;
        align-items: center; /*  子元素相对父元素垂直居中 */
      }
      .wrap {
        flex: 1;
        .ipt {
          height: 100%;
          background: none;
          border: 0 none;
          width: 90%;
          font-size: 34px;
          padding-left: 30px;
        }
      }
    }
  }
  .form_submit {
    margin: 300px auto 0;
    padding-bottom: 20px;
    width: 340px;
    .complete_btn {
      width: 340px;
      height: 80px;
      background: #07c160;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      font-size: 28px;
      color: #fff;
      border-radius: 10px;
    }
  }
}
</style>