<template>
	<view class="login-container">
		<image class="login-bg" src="@/static/logo_start.png" mode="widthFix"></image>
		<view class="login-btn">
			<u-button shape="circle" style="color: #111;font-size: 32rpx;" @click="goLogin">手机号码或用户名登录/注册</u-button>
		</view>
		<view class="agreement">
			<u-checkbox-group v-model="checked">
				<u-checkbox name="agreement" size="16" shape="circle" labelColor="#333" labelSize="14" activeColor="#333" label="我已阅读并同意《用户协议》及《隐私协议》"></u-checkbox>
			</u-checkbox-group>
		</view>
		<!-- 弹出框 -->
		<u-modal :show="show" :content='content' showCancelButton closeOnClickOverlay @close="show = false" @cancel="show = false" @confirm="onConfirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				checked: [],
				show: false,
				content: '请勾选用户协议和隐私协议'
			}
		},
		methods: {
			goLogin(){
				if(this.checked.length > 0) {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				} else {
					this.show = true
				}
			},
			onConfirm(){
				uni.redirectTo({
					url: '/pages/login/index'
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.login-container {
	position: relative;
	height: 100vh;
	background-color: #F3CA32;
	.login-bg{
		position: absolute;
		width: 972rpx;
		top: 204rpx;
		left: 96rpx;
	}
	.login-btn{
		position: absolute;
		top: 60%;
		left: 50%;
		width: 600rpx;
		transform: translateX(-50%);
	}
	.agreement{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 68rpx;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
	}
}
</style>