XEH-miniProgram/pages/self/login.vue

<template>
	<view class="page-wrap">
		<view class="title-row">手机号登录</view>
		<view class="input-row">
			<input placeholder-style="color: #ABABAB" class="input" type="number" placeholder="手机号" maxlength="11" />
		</view>
		<view class="input-row code-row">
			<input placeholder-style="color: #ABABAB" class="input" type="number" placeholder="验证码" maxlength="6" />
			<button class="btn">获取验证码</button>
		</view>
		<view class="tips-row">您的手机号将做为登录账号使用并仅用于接收验证码，我们不会在任何地方泄露。</view>
		<button class="login-btn">登　录</button>
		<view class="agreement-row">
			<checkbox checked style="transform:scale(0.6)"/>
			同意我们的
			<text class="link">用户协议</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	min-height: 100%;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 109.89rpx;
	box-sizing: border-box;
	.title-row {
		font-size: 38.46rpx;
		color: #00bcd2;
		margin-bottom: 41.21rpx;
	}
	.input-row {
		width: 523.35rpx;
		height: 68.68rpx;
		font-size: 24.73rpx;
		border-bottom: 1rpx solid #ababab;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 27.47rpx;
		.input {
			width: 100%;
			height: 100%;
			padding: 0 27.47rpx;
			box-sizing: border-box;
		}
		&.code-row {
			.input {
				width: 370.88rpx;
			}
		}
		.btn {
			font-size: 24.73rpx;
			color: #f97631;
			background: no-repeat;
			padding: 0;
			height: 100%;
			line-height: 65.93rpx;
		}
	}
	.tips-row {
		font-size: 24.73rpx;
		color: #999;
		line-height: 38.46rpx;
		padding: 0 27.47rpx;
	}
	.login-btn {
		width: 521.98rpx;
		height: 75.55rpx;
		line-height: 75.55rpx;
		background: #f97631;
		border-radius: 8.24rpx;
		font-size: 30.22rpx;
		color: #fff;
		margin: 82.42rpx auto 0;
	}
	.agreement-row{
		font-size: 24.73rpx;
		display: flex;
		align-items: center;
		color: #999;
		margin-top: 27.47rpx;
		.link{
			color: #0384D6;
			margin-left: 8.24rpx;
		}
	}
}
</style>