<template>
  <div>
    <title-bar title="客户体检" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div>
      <img class="photoa" src="../../../../assets/images/idcardpeople.png" />
      <div style="position: absolute" class="textA">拍摄人像面</div>
    </div>
    <div>
      <img class="photob" src="../../../../assets/images/idcardcountry.png" />
      <div style="position: absolute" class="textB">拍摄国徽面</div>
    </div>
    <div class="inputValue">
      <p class="wordType">证件类型</p>
      <input type="text" disabled="true" placeholder="身份证" class="inputPosition" />
      <p class="idNo">证件号码</p>
      <input type="text" class="inputPositionA" />
      <p class="customName">客户名称</p>
      <input type="text" class="inputPositionB" />
    </div>
    <div>
      <van-button type="info" round style="position: absolute; left: 27%; top: 74%; width: 47%; height: 6%; background-color: rgba(255, 87, 108, 1)" @click="onChang">确定</van-button>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
/**
 * @Description:客户体检
 * @author pd
 * @date 2021-11-06 16:42:57
 */
@Component({
  name: "CustomCheck",
})
export default class CustomCheck extends Vue {
  flag = false;
  onChang() {
    this.$router.push({
      path: "/workbench/commonly-used/personal/custom-check-info",
    });
  }
  onClick() {
    console.log(111111);
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 20%;
}
.photoa {
  position: absolute;
  left: 28%;
  top: 15%;
  width: 22%;
  height: 30%;
}

.photob {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 22%;
  height: 30%;
}

.textA {
  left: 35%;
  top: 40%;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #333333;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.textB {
  left: 56%;
  top: 40%;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  color: #333333;
  text-align: center;
  line-height: normal;
  text-transform: none;
}

.inputValue {
  border-width: 0;
  position: absolute;
  left: 22%;
  top: 47%;
  width: 50%;
  height: 50%;
  display: flex;
  font-size: 10%;
  color: #999999;
  line-height: 10%;
}

.inputPosition {
  position: absolute;
  left: 20%;
  top: 2%;
  width: 83%;
  height: 11%;
  padding: 3% 2% 3% 2%;
  font-family: "Arial Normal", "Arial";
  font-weight: 900;
  font-style: normal;
  font-size: 13%;
  letter-spacing: normal;
  color: #000000;
  text-align: center;
  text-transform: none;
  /*background-color: transparent;
  border-color: transparent;*/
}

.inputPositionA {
  position: absolute;
  left: 20%;
  top: 19%;
  width: 83%;
  height: 11%;
  padding: 3% 2% 3% 2%;
  font-family: "Arial Normal", "Arial";
  font-weight: 900;
  font-style: normal;
  font-size: 13%;
  letter-spacing: normal;
  color: #000000;
  text-align: center;
  text-transform: none;
  /*background-color: transparent;
  border-color: transparent;*/
}
.inputPositionB {
  position: absolute;
  left: 20%;
  top: 35%;
  width: 83%;
  height: 11%;
  padding: 3% 2% 3% 2%;
  font-family: "Arial Normal", "Arial";
  font-weight: 900;
  font-style: normal;
  font-size: 13%;
  letter-spacing: normal;
  color: #000000;
  text-align: center;
  text-transform: none;
  /*background-color: transparent;
  border-color: transparent;*/
}

.wordType {
  position: absolute;
  left: 8%;
  top: 7%;
}

.idNo {
  position: absolute;
  left: 8%;
  top: 25%;
}
.customName {
  position: absolute;
  left: 8%;
  top: 41%;
}
.button {
  border-radius: 2% 2% 2% 2%;
  position: absolute;
  left: 27%;
  top: 74%;
  width: 47%;
  height: 6%;
  background-color: rgba(255, 87, 108, 1);
}
</style>
