JP-ChargeTeam51/pages/login/login.vue

<template>
	<view class="wrap">
		<view class="login">
			<view class="login-title">
				<h3>手机号登录/注册</h3>
				<p>欢迎来到荆易充</p>
			</view>
			
			<view class="login-form">
				<view class="login-form-item">
					<view class="title">手机号</view>
					<view class="input">
						<u-input v-model="tel" type="number" placeholder="请输入手机号" placeholder-style="font-size:16px;color:#ccc;"/>
					</view>
					<view class="tips">未注册的手机号验证后将自动注册</view>
				</view>
				<view class="login-form-item">
					<view class="title">验证码</view>
					<view class="input">
						<view class="code">获取验证码</view>
						<u-input v-model="tel" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
					</view>
					<u-checkbox-group>
						<u-checkbox class="tips" v-model="value" shape="circle" @change="checkboxChange()">
							<view v-if="!value">我已阅读并同意<span>《会员协议》</span>和<span>《隐私协议》</span></view>
							<view v-else>我已阅读并同意<span style="color: #000000;">《会员协议》</span>和<span style="color: #000000;">《隐私协议》</span></view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			
			<u-button :style="[inputStyle]" class="login-btn" type="success" shape="circle">登录</u-button>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			tel: '',
			value: false,
		}
	},
	computed: {
		inputStyle() {
			let style = {};
			if(this.tel) {
				style.color = "#fff";
				style.backgroundColor = this.$u.color['success'];
			}
			return style;
		}
	},
	methods: {
		checkboxChange() {
			this.value = !this.value;
		},
	}
};
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;
	.login {
		width: 600rpx;
		padding-top: 80rpx;
		margin: 0 auto;
		.login-title {
			text-align: left;
			h3{
				font-size: 48rpx;
				font-weight: normal;
			}
			p{
				margin-top: 4px;
				color:#777
			}
		}
		.login-form-item{
			margin-top: 40px;
			.title{
				margin-bottom: 8px;
			}
			.input {
				border-bottom: 1px solid #f7f7f7;
				position: relative;
			}
			.code{
				position: absolute;
				right: 0;
				top:7px;
				color:#1677FF;
			}
			.tips {
				color: $u-type-info;
				margin-top: 12px;
				font-size: 12px;
				span{
					color:#3fbd70;
				}
			}
		}
	
		.login-btn {
			margin-top: 40px;
			background-color: #a7dbc2;
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
}
</style>