<template>
  <div class="memberInfo">
    <div class="user">
      <div class="pic">
        <img src="../static/avatar.png" alt="">
      </div>
      <div class="info">
        <div class="name">李白</div>
        <div class="idNumber">42068219980502252X</div>
      </div>
      <div class="relation">
        户主
      </div>
    </div>

    <div class="basicInfo">
      <h2>个人基本信息</h2>
      <div class="items">
        <p>家庭住址</p>
        <div>安徽省黄山市歙县郑村镇潭渡村黎明4组11</div>
      </div>
      <div class="item">
        <span>身份证号</span><span>42068219980502252X</span>
      </div>
      <div class="item">
        <span>性别</span><span>男</span>
      </div>
      <div class="item">
        <span>年龄</span><span>18</span>
      </div>
      <div class="item">
        <span>民族</span><span>汉族</span>
      </div>
      <div class="item">
        <span>文化程度</span><span>初中</span>
      </div>
      <div class="item">
        <span>婚姻状况</span><span>未婚</span>
      </div>
      <div class="item">
        <span>政治面貌</span><span>党员</span>
      </div>
      <div class="item">
        <span>兵役状况</span><span>未服兵役</span>
      </div>
      <div class="item">
        <span>宗教信仰</span><span>无</span>
      </div>
      <div class="item">
        <span>职业</span><span>工人</span>
      </div>
    </div>

    <div class="contactInfo">
      <h2>联络信息</h2>
      <div class="item">
        <span>联系方式</span><span>18571799417</span>
      </div>
      <div class="items">
        <p>现住址</p>
        <div>安徽省黄山市歙县郑村镇潭渡村黎明4组11</div>
      </div>
      <div class="items">
        <p>现住详细地址</p>
        <div>安徽省黄山市歙县郑村镇潭渡村黎明4组11</div>
      </div>
      <div class="items">
        <p>户籍地址</p>
        <div>安徽省黄山市歙县郑村镇潭渡村黎明4组11</div>
      </div>
      <div class="items">
        <p>户籍详细地址</p>
        <div>安徽省黄山市歙县郑村镇潭渡村黎明4组11安徽省黄山市歙县郑村镇潭渡村黎明4组11安徽省黄山市歙县郑村镇潭渡村黎明4组11安徽省黄山市歙县郑村镇潭渡村黎明4组11</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "memberInfo",
  appName: "家庭详情",
  data() {
    return {

    }
  },
  onShow() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.memberInfo {
  .user {
    display: flex;
    background: #FFF;
    padding: 32px;
    .pic {
      width: 96px;
      height: 96px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: calc(100% - 176px);
      .name {
        font-size: 32px;
        font-weight: 600;
      }
      .idNumber {
        margin-top: 8px;
        color: #999999;
      }
    }

    .relation {
      width: 80px;
      align-self: center;
    }

  }

  .basicInfo,
  .contactInfo {
    margin-top: 24px;
    padding: 0 32px;
    box-sizing: border-box;
    background: #FFF;
    h2 {
      padding: 26px 0;
      font-style: 32px;
      font-weight: 600;
    }
    .items {
      padding: 12px 0;
      p {
        margin-bottom: 12px;
        color: #999999;
        font-style: 30px;
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      span:first-child {
        color: #999999;
        font-style: 30px;
      }
    }
  }
  .contactInfo {
    margin-bottom: 24px;
  }
}
</style>