<template>
	<view>
		<lf-nav title="登录/注册" :showIcon="true" bgColor="#fff"></lf-nav>
		<view class="illustration">
			<image class="img" src="../../../static/images/empty.png" mode="aspectFill"></image>
		</view>
		<view class="fixed-btn">
			<button class="btn1" hover-class="lf-opacity" @click="toPhoneLogin">手机号登录</button>
			<button class="btn2" hover-class="lf-opacity" @click="getUserInfo">微信授权登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			getUserInfo(){
				uni.getUserProfile({
					desc: '我们将获取到的信息用于展示',
					lang: 'zh_CN',
					complete: result => {
						console.log(result);
						if(result.errMsg == 'getUserProfile:ok'){
							console.log("获取成功！");
						}
					}
				})
			},
			toPhoneLogin(){
				this.$url('/pages/user/loginType/loginType');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.illustration{
		width: 750rpx;
		height: 750rpx;
		position: fixed;
		top: 44%;
		left: 0;
		margin-top: -375rpx;
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.fixed-btn{
		width: 630rpx;
		height: max-content;
		position: fixed;
		left: calc(50% - 315rpx);
		top: calc(46% + 375rpx);
		display: flex;
		justify-content: space-between;
		.btn1, .btn2{
			width: 300rpx;
			height: 100rpx;
			border-radius: 60rpx;
			border: 1rpx solid #15716E;
			box-sizing: border-box;
			line-height: 100rpx;
			font-size: 32rpx;
		}
		.btn1{
			background-color: #F3F8F8;
			color: #15716E;
		}
		.btn2{
			background-color: #15716E;
			color: #FFFFFF;
		}
	}
</style>
