@import '../../assets/scss/variables.scss';

.page {
	height: 100vh;
	width: 100vw;
	display: flex;
	background: url('../../assets/images/login/background.jpg');
	background-size: 100% 100%;
	user-select: none;

	// logo
	.logo {
		width: 200px;
		height: 60px;
		position: absolute;
		margin-top: 55px;
		margin-left: 70px;
		background: url('../../assets/images/login/icon.png');
		background-size: 100% 100%;
	}

	// 容器
	.container {
		width: 550px;
		height: 88%;
		margin-right: 105px;

		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		background: $primary-color-600;
		box-shadow: 0 4px 53px 7px rgba(3, 23, 22, 0.3);

		// 装饰物
		.top {
			width: 135px;
			height: 270px;
			position: absolute;
			top: 0;
			right: -15px;
			background: url('../../assets/images/login/decoration-top.png');
			background-size: 100% 100%;
		}

		.bottom {
			width: 135px;
			height: 240px;
			position: absolute;
			bottom: 0;
			left: 0;
			background: url('../../assets/images/login/decoration-bottom.png');
			background-size: 100% 100%;
		}

		// 标题
		.title {
			width: 250px;
			height: 80px;
			margin-bottom: 30px;
			//margin-top: 130px;
			background: url('../../assets/images/login/logo.png');
			background-size: 100% 100%;
		}

		// 第三方登录
		.third-login {
			width: 370px;
			margin-top: 25px;
			font-size: 0.875rem;
			font-weight: 400;
			color: #ffffff;
			display: flex;
			align-items: center;

			// icon
			.icon {
				margin: 0 8px;
				font-size: 1.5rem;
				color: #ffffff;
			}

			.first-icon {
				margin-left: 16px;
			}

			// 注册
			.register {
				opacity: 0.7;
			}
		}

		// 条款
		.help {
			display: flex;

			div {
				width: 80px;
				height: 22px;
				font-size: 0.875rem;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);

				display: flex;
				justify-items: center;
				align-content: center;
			}
		}

		.copy-right {
			margin-top: 8px;
			margin-bottom: 40px;
			font-size: 0.75rem;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}
	}
}