sso-ssr/pages/mobile/registerPerson/index.vue

<template>
<div class="person">
  <header-mobile/>
  <div class="f-main">
    <p>个人注册</p>
    <div class="f-form">
      <div class="page-part">
        <mt-field placeholder="会员名" v-model="vipName"></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="密码" v-model="password"></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="确认密码" v-model="password"></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="手机号码" v-model="mobile"></mt-field>
      </div>
      <div class="page-part">
        <mt-field placeholder="短信验证码" v-model="token">
          <span class="token">获取验证码</span>
        </mt-field>
      </div>
    </div>
    <div class="form-btn">
      <div class="page-part">
        <el-checkbox v-model="checked">我已阅读并同意 <a href="#">《优软云服务条款》</a></el-checkbox>
      </div>
      <mt-button type="primary" size="large">完成注册</mt-button>
    </div>
  </div>
  <div class="f-footer">
    <p>已有账号? <a href="#">立即登录</a></p>
  </div>
</div>
</template>

<script>
  import { HeaderMobile } from '~components/mobile'
  export default {
    name: 'registerPerson',
    layout: 'mobile',
    components: {
      HeaderMobile
    },
    data () {
      return {
        vipName: '',
        password: '',
        mobile: '',
        token: '',
        checked: ''
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.person{
  .f-main{
    background: #fff;
    padding:0.55rem .3rem 1.1rem;
    p{
      font-size: .4rem;
      color:#787878;
      margin-bottom:.35rem;
    }
    .f-form{
      border-top:1px solid #b5b5b5;
      padding-top:.6rem;
      .token{
        display:inline-block;
        padding: 0 .5rem;
        text-align: center;
        border-left:1px solid #b5b5b5;
      }
    }
  }
}
</style>