uniapp 结合uview2实现实名认证样式

uniapp yekong

uniapp 结合uview2实现实名认证样式

<template>
    <view class="certification">
        <!-- 注意,如果需要兼容微信小程序,最好通过setRules方法设置rules规则 -->
        <u--form labelPosition="left" labelWidth="80" :model="model1" :rules="rules" ref="form1">
            <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
                <u--input class="inputx" placeholder="请输入姓名" inputAlign="right" v-model="model1.userInfo.name"
                    border="none"></u--input>
            </u-form-item>
            <u-form-item label="身份证号" prop="userInfo.id" borderBottom ref="item1">
                <u--input class="inputx" placeholder="请输入身份证号码" inputAlign="right" v-model="model1.userInfo.id"
                    border="none"></u--input>
            </u-form-item>
        </u--form>
        <u-button class="mt50" @click="submit" type="primary">立即认证</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                model1: {
                    userInfo: {
                        name: '',
                        id: '',
                    },
                },
                rules: {
                    'userInfo.name': {
                        type: 'string',
                        required: true,
                        message: '请填写姓名',
                        trigger: ['blur', 'change']
                    },
                },
            };
        },
        methods: {
            submit() {

            }
        },
    };
</script>

<style lang="scss" scoped>
    .certification {
        width: 690rpx;
        margin: 0 auto;
    }

    .inputx {
        width: 100%;
        text-align: right;
    }

    .mt50 {
        margin-top: 50rpx;
    }
</style>
喜欢