contract/src/views/person.vue

<template>
    <multi-color-background top-height="2.7">
      <h1 class="title">个人认证</h1>
      <div class="main" >
        <div class="input-container">
          <mt-field label="姓名" placeholder="请输入真实姓名" v-model="personInfo.name"></mt-field>
          <mt-field label="身份证号" placeholder="请输入身份证号码" v-model="personInfo.idcard"></mt-field>
          <mt-field label="银行卡号" placeholder="请输入银行卡号码" v-model="personInfo.bankCard"></mt-field>
          <mt-field label="预留手机" placeholder="请输入银行预留手机号码" v-model="personInfo.phone"></mt-field>
          <mt-field class="vcode-input" label="验证码" placeholder="请输入验证码" v-model="personInfo.verifyCode"></mt-field>
          <button class="get-vcode">获取验证码</button>
        </div>
        <button class="submit" @click="fakeSubmit">提交</button>
      </div>
    </multi-color-background>
</template>

<script>
    import MultiColorBackground from "../components/multiColorBackground";
    export default {
        name: "person",
      components: {MultiColorBackground},
      data(){
          return{
            personInfo:{
              name:'',
              idcard:'',
              bankCard:'',
              phone:'',
              verifyCode:''
            }
          }
      },
      methods: {
        fakeSubmit() {
          console.log(this.contactInfo)
        }
      }

    }
</script>

<style scoped>
  .main .input-container{
    background-color: white;
    border: 1px  white solid;
    position: relative;
    border-radius: 10px;
    text-align: left;
  }
  .main{
    margin: 0.4rem 0.4rem 0;

  }
  .vcode-input{
    width: 68%;
  }
  .get-vcode{
    position: absolute;
    bottom:0.3rem;
    right:0.3rem;
    width: 2.8rem;
    border: 1px solid #60c0ff;
    color:#60c0ff;
    border-radius: 0.5rem;
    height: 0.9rem;
    background-color: white;
  }
  .submit{
    width: 100%;
    height: 1.1rem;
    border: none;
    border-radius: 0.6rem;
    margin-top: 1.4rem;
    background-color: #60c0ff;
    font-size: 0.4rem;
    color: white;
  }
</style>