<template>
<div class="com-root">
<div class="content1">
  <div class="wrap1">
    <image src="../../static/06@3x (2).png"></image>
  </div>
  <div class="wrap2">
    <div class="wrap2_1">恢复默认头像</div>
    <div class="wrap2_2">更换头像</div>
  </div>
</div>
  <div class="content2">
    <div class="wrap1">
      <div class="wrap1_1">
        <div class="wrap1_1_1">姓名</div>
        <div class="wrap1_1_2">已实名</div>
        <div class="wrap1_1_3">XXX</div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">身份证号</div>
        <div class="wrap1_1_3">292199922283726657</div>
      </div>
      <div class="wrap1_1">
        <div class="wrap1_1_1">手机号</div>
        <div class="wrap1_1_3">12318881999</div>
      </div>
    </div>
    <div class="wrap1" style="margin-top: 30rpx">
      <div class="wrap1_1">
        <div class="wrap1_1_1">微信号</div>
        <div class="wrap1_1_3">12318881999/may1299</div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "set-up"
}
</script>
<style lang="scss">
.com-root{
  padding-left: 32rpx;
  padding-right: 32rpx;
  padding-top: 44rpx;
  .content2{


    .wrap2{
      padding: 26rpx 32rpx 22rpx 18rpx;
    }
    .wrap1{
      border-radius: 20rpx;
background-color: #FFFFFF;
      padding: 0rpx 32rpx 0rpx 18rpx;
      .wrap1_1{
        padding-left: 14rpx;
        display: flex;
        align-items: center;
        padding-bottom: 22rpx;
        padding-top: 26rpx;
        border-bottom: 1px solid #DBE4ED;
        &:last-child{
          border-bottom: none;
        }
        .wrap1_1_1{
          margin-right: 28rpx;
        color: #626262;
        font-size: 24rpx;
        }
        .wrap1_1_3{
          box-sizing: border-box;
          padding-left: 36rpx;
          font-size: 24rpx;
          margin-left: auto;
          width: 444rpx;
          color:#939393 ;
          border-left: 1px solid #E4EAF1;
        }
        .wrap1_1_2{
          border-radius: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 16rpx;
          width: 80rpx;
          height: 28rpx;
          background-color: #40BE94;
        }
      }
    }
  }
.content1{
  display: flex;
  padding-left: 76rpx;
  padding-right: 66rpx;
  margin-bottom: 38rpx;
  .wrap2{
    .wrap2_2{
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 348rpx;
      height: 56rpx;
      background-color: #40BE94;
      color: #fff;
    }
    .wrap2_1{
      margin-bottom: 20rpx;
      border-radius: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 348rpx;
      height: 56rpx;
      background-color: #000;
      color: #fff;
    }
  }
  .wrap1{
    margin-right:42rpx;
    image{
      width: 154rpx;
      height: 154rpx;
    }
  }
}
}
</style>
