Contract/src/views/Author.vue

<template>
  <div class="wrap-ctnr">
    <div class="info-ctnr">
      <mt-field label="授权人姓名" placeholder="请输入法人姓名" v-model="auInfo.name"></mt-field>
      <mt-field label="授权人电话" placeholder="请输入法人电话" type="tel" v-model="auInfo.tel"></mt-field>
      <mt-field label="身份证号" placeholder="请输入法人身份证号" v-model="auInfo.num"></mt-field>
      <div class="wrap-box">
        <uploader msg="身份证正面"></uploader>
        <uploader msg="身份证反面"></uploader>
        <uploader msg="授权书(公章)"></uploader>
      </div>
    </div>
    <router-link to="/mine/company/result" class="btn-box" @click.native="addfirm">提交</router-link>
  </div>
</template>
<script type="text/javascript">
  import uploader from "./Uploader.vue"
  export default{
    data(){
      return {
        frimList: this.$store.state.frimList,
        auInfo:{
          name:"",
          tel:"",
          num:""
        },
      }
    },
    components:{
      uploader
    },
    methods:{
      addfirm:function(){
      }
    },
  }
</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>