<template>
	<div class="wscn-http404-container">
		<div class="box">
			<div class="left">
				<img src="@/assets/image/default/Oval 1.png" alt="" />
				<img src="@/assets/image/default/404.png" alt="" />
			</div>
			<div class="right">
				<p>404</p>
				<p>LOOKS LIKE YOU‘RE LOST</p>
				<p>The page you are looking for not availblel</p>
				<p @click="$router.push({ path: '/login' })">
					GO TO HOME
					<span>→</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "Page404"
}
</script>

<style lang="scss" scoped>
.wscn-http404-container {
	height: 100%;
	width: 100%;
	overflow: hidden;

	.box {
		width: 800px;
		height: 600px;
		margin: 15% auto 0;

		.left {
			width: 280px;
			height: 280px;
			float: left;
			position: relative;

			img:nth-child(1) {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
			}

			img:nth-child(2) {
				position: absolute;
				top: 16px;
				left: 50px;
				width: 84%;
			}
		}

		.right {
			float: left;
			margin-left: 62px;
			line-height: 1;
			position: relative;
			top: -4px;

			p:nth-child(1) {
				font-size: 140px;
				color: #247dd3;
				padding-bottom: 32px;
				font-weight: bold;
			}

			p:nth-child(2) {
				font-size: 20px;
				font-weight: bold;
			}

			p:nth-child(3) {
				font-size: 16px;
				padding-top: 16px;
				color: #999999;
			}

			p:nth-child(4) {
				color: #247dd3;
				font-size: 24px;
				margin-top: 66px;
				font-weight: bold;
				float: left;
				cursor: pointer;
				span {
					font-size: 30px;
					padding-left: 10px;
				}
			}
		}
	}
}
</style>
