Contract/src/views/Legal.vue

<template>
  <div class="wrap-ctnr" v-if="state == 'legal'">
    <div class="info-ctnr">
      <mt-field label="法人姓名" placeholder="请输入法人姓名" v-model="legalInfo.name"></mt-field>
      <mt-field label="法人电话" placeholder="请输入法人电话" type="tel" v-model="legalInfo.tel"></mt-field>
      <mt-field label="身份证号" placeholder="请输入法人身份证号" v-model="legalInfo.num"></mt-field>
      <div class="wrap-box">
        <uploader msg="身份证正面"></uploader>
        <uploader msg="身份证反面"></uploader>
      </div>
    </div>
    <router-link to="/mine/company/author" class="btn-box">下一步</router-link>
  </div>
</template>
<script type="text/javascript">
  import uploader from "./Uploader.vue"
  export default{
    data(){
      return {
        state:"legal",
        legalInfo:{
          name:"",
          tel:"",
          num:""
        }
      }
    },
    components:{
      uploader
    }
  }
</script>
<style scoped>
  .wrap-ctnr{
    height: 100%;
    background: #E8EFF5;
    margin-top: 1.066098rem;
    .info-ctnr{
      background-color: #fff;
      width: 8.795309rem;
      margin: 0 auto;
      border-radius: 0.133262rem;
      position: relative;
      top: -0.666311rem;
      box-shadow: 0 0 20px 5px rgba(96, 192, 255, 0.35);
      overflow: hidden;
      .mint-field{
        height: 1.172708rem;
        line-height: 1.172708rem;
        border-bottom: 2px solid #e8eff5;
      }
      .wrap-box{
        display: flex;
        justify-content: space-around;
      }
    }
    /*按钮样式*/
    .btn-box{
      display: block;
      width: 8.795309rem;
      height: 1.066098rem;
      line-height: 1.066098rem;
      margin: 0 auto;
      border-radius: 40px;
      background-color: #60c0ff;
      color: #fff;
      font-size: 30px;
      box-shadow: 0 0 20px 5px rgba(96, 192, 255, 0.35);
    }
  }
</style>