contract/src/views/addContact.vue

<template>
    <multi-color-background top-height="2.7" show-go-back="1">
      <h1 class="title">添加联系人</h1>
      <div class="main" >
        <div class="input-container shadow">
          <mt-field label="姓名" placeholder="请输入真实姓名或公司名称" v-model="contactInfo.name"></mt-field>
          <mt-field label="账号" placeholder="请输入联系人账号" v-model="contactInfo.phone"></mt-field>
          <selector label="分类" placeholder="请选择联系人类别" :options="typeOptions" v-model="contactInfo.type"></selector>
        </div>
        <button class="submit" @click="fakeSubmit">提交</button>
      </div>
    </multi-color-background>
</template>

<script>
    import MultiColorBackground from "../components/multiColorBackground";
    import Selector from "../components/selector";
    export default {
        name: "addContact",
      components: {Selector, MultiColorBackground},
      data(){
          return{
            contactInfo:{
              name:'',
              phone:'',
              type:''
            },
            typeOptions:[
              '个人',
              '企业'
            ]
          }
      },
      methods: {
        fakeSubmit() {
          console.log(this.contactInfo)
        }
      }
    }
</script>

<style scoped>

  .main .input-container{
    background-color: white;
    border: 1px  white solid;
    border-radius: 10px;
  }
  .main{
    margin: 0.4rem 0.4rem 0;

  }
  .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>