front-end/mobile-code/src/pages/user/register.vue

<template>
	<div class="app-content">
		<div class="module-com">
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">手机号</div>
				<input placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入手机号" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell code-wrap" :hover="false">
				<div class="tui-title">验证码</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入验证码" maxlength="50" type="number" />
				<div class="tui-code">获取验证码</div>
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">姓名</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" />
			</tui-list-cell>
			<tui-list-cell class="line-cell" :hover="false">
				<div class="tui-title">生日</div>
				<input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" />
			</tui-list-cell>
            <div class="btn-wrap">
			    <button class="button-com red big">确认</button>
            </div>
		</div>
	</div>
</template>

<script>
import tuiListCell from '@/components/plugin/list-cell'
export default {
	name: 'register',
	components: {
		tuiListCell
	},
	data() {
		return {}
	}
}
</script>

<style lang="scss" scoped>
	// 公共
	.line-cell {
		.tui-title {
			width: 210px;
			color: $fontColor2;
		}
		.tui-input {
			width: calc(100% - 210px);
			font-size: 28px;
		}
		.tui-placeholder {
			color: #ccc;
		}
		.phcolor {
			color: #ccc;
		}
    }
    .btn-wrap {
        width: 90%;
        margin: 60px auto;
        .button-com {
            width: 100%;
            margin: 0 auto;
        }
    }
    .code-wrap {
		.tui-input {
			width: calc(100% - 410px);
			font-size: 28px;
		}
        .tui-code {
            width: 200px;
            text-align: center;
            border-left: 1px solid $borderColor;
            color: $mainColor;
        }
    }
</style>