sign-stream/src/views/reg-details/index.vue

<script setup>
import defaultImage1 from '@/assets/images/zu1172@2x.png';

</script>

<template>
  <div class="container">
    <div class="content1">
      报名日期：2023年12月18日，09:33AM
    </div>
    <div class="content2">
      <div class="wrap1">
        <div class="wrap1_1">身份证人像面</div>
        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">身份证人像面</div>
        <div class="wrap1_2"><img class="wrap1_2_1" :src="defaultImage1">
          <img class="wrap1_2_2" src="@/assets/images/zu1179@2x.png" alt="">
        </div>
      </div>
    </div>
    <div class="content3">
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">姓名</div>
          <div class="wrap1_1_2">某某某</div>
        </div>

      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">性别</div>
          <div class="wrap1_1_2">男/女</div>
        </div>

      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">身份证号码</div>
          <div class="wrap1_1_2">2912301283123821801</div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">身份证地址</div>
          <div class="wrap1_1_2">玛纳斯曾经多少次收到款不错的撒纯
            白色的长款保暖升级新款淑女款
          </div>
        </div>
      </div>
      <div class="wrap1">
        <div class="wrap1_1">
          <div class="wrap1_1_1">有效日期</div>
          <div class="wrap1_1_2">2023年12月16日-2026年12月16日</div>
        </div>
      </div>
    </div>
    <div class="content4">
      <div class="wrap1">近照</div>
      <div class="wrap2">
        <div class="wrap2_1"></div>
        <div class="wrap2_2"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 14px 22px 75px;

  .content4 {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 22px 25px;

    .wrap2 {
      margin-top: 3px;
      border-radius: 10px;
      width: 100%;
      height: 325px;
      border: 3px solid #2159C4;
    }

    .wrap1 {
      font-size: 10px;
      color: #2159C4;
    }
  }

  .content3 {
    margin-top: 10px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px;

    .wrap1 {
      padding-left: 14px;
      padding-right: 14px;

      &:last-child .wrap1_1 {
        border-bottom: none;
      }

      .wrap1_1 {
        padding-top: 14px;
        padding-bottom: 14px;
        border-bottom: #BBC5E0 solid 1px;
        display: flex;

        .wrap1_1_2 {
          padding-left: 10px;
          color: #24437E;
          font-size: 12px;
        }

        .wrap1_1_1 {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          border-right: #BBC5E0 solid 1px;
          width: 92px;
          font-size: 12px;
          color: #000;
          padding-left: 10px;

        }
      }
    }
  }

  .content2 {
    margin-top: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 12px 22px 14px;
    display: flex;
    justify-content: space-between;

    .wrap1 {
      width: 136px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .wrap1_2 {
        margin-top: 3px;
        height: 79px;
        position: relative;

        .wrap1_2_2 {
          width: 16px;
          height: 16px;
          position: absolute;
          bottom: 5px;
          right: 6px;
        }

        .wrap1_2_1 {
          width: 100%;
          height: 100%;
        }
      }

      .wrap1_1 {
        font-size: 10px;
        color: #2159C4;
      }
    }
  }

  .content1 {
    height: 46px;
    background-color: #2159C4;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
  }
}
</style>