登录模块 (一) 01-基础布局-登录login页面-field输入框组件

基础布局-登录login页面-field输入框组件

field输入框-错误提示模式：https://youzan.github.io/vant/#/zh-CN/field

src/views/user/login.vue

• 界面

<div class="page-login">
    <van-nav-bar left-arrow @click-left="$router.back()" title="登 录"></van-nav-bar>
    <van-cell-group>
        <van-field  label="手机号" placeholder="请输入手机号" />
        <van-field label="验证码" placeholder="请输入验证码">
            <van-button class="p5" slot="button" size="mini" type="primary">
                发送验证码           
            </van-button>
        </van-field>
    </van-cell-group>
    <div class="btn_box">
        <van-button type="info" @click="login" block round>登 录</van-button>
    </div>
</div>

• 样式

.p5{
  padding: 0 5px;
}
.btn_box{
  padding: 10px;
  .van-button{
    height: 32px;
    line-height: 30px;
  }
}