spring-cloud
/
404.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <style>
    .error404-body-con{width: 700px;
		height: 500px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.el-card {
		border: 1px solid #ebeef5;
		background-color: #fff;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.box-card {

	}
	.is-always-shadow{
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	}
	.el-card, .el-message {
		border-radius: 4px;
		overflow: hidden;
	}
	.box-card .el-card__body {
		padding: 20px 20px 0;
	}
	.error404-body-con-title[data-v-2eb098b8] {
		text-align: center;
		font-size: 240px;
		font-weight: 700;
		color: #2d8cf0;
		height: 260px;
		line-height: 260px;
		margin-top: 40px;
	}
	.error404-body-con-message[data-v-2eb098b8] {
		display: block;
		text-align: center;
		font-size: 30px;
		font-weight: 500;
		letter-spacing: 12px;
		color: #dddde2;
	}
	.error404-btn-con[data-v-2eb098b8] {
		text-align: center;
		padding: 20px 0;
		margin-bottom: 40px;
	}
	.error404-body-con-title span[data-v-2eb098b8] {
		display: inline-block;
		color: #19be6b;
		font-size: 230px;
		animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
		-webkit-animation:error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
	}
	.el-button--text {
		color: #409EFF;
		background: 0 0;
		padding-left: 0;
		padding-right: 0;
	}
	.el-button {
		width: 200px;
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #dcdfe6;
		color: #606266;
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		font-weight: 500;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
	}
	.el-button--primary {
		color: #fff;
		background-color: #409EFF;
		border-color: #409EFF;
	}
	@keyframes error404animation-data-v-2eb098b8{0%{transform:rotate(0deg)}20%{transform:rotate(-60deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(50deg)}80%{transform:rotate(-20deg)}to{transform:rotate(0deg)}}.error404-body-con[data-v-2eb098b8]{width:700px;height:500px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.error404-body-con-title[data-v-2eb098b8]{text-align:center;font-size:240px;font-weight:700;color:#2d8cf0;height:260px;line-height:260px;margin-top:40px}.error404-body-con-title span[data-v-2eb098b8]{display:inline-block;color:#19be6b;font-size:230px;animation:error404animation-data-v-2eb098b8 3s ease 0s infinite alternate}


	/*当屏幕大于320px，并小于1156px时执行下面的css*/
	@media screen and (min-width: 250px) and (max-width: 600px){

		.error404-body-con{
			width: 350px !important;
			height: 300px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
		.el-card {
			border: 1px solid #ebeef5;
			background-color: #fff;
			color: #303133;
			-webkit-transition: .3s;
			transition: .3s;
		}
		.box-card {

		}
		.is-always-shadow{
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		}
		.el-card, .el-message {
			border-radius: 4px;
			overflow: hidden;
		}
		.box-card .el-card__body {
			padding: 20px 20px 0;
		}
		.error404-body-con-title[data-v-2eb098b8] {
			text-align: center;
			font-size: 130px;
			font-weight: 700;
			color: #2d8cf0;
			height: 240px;
			line-height: 240px;
			margin-top: 40px;
		}
		.error404-body-con-message[data-v-2eb098b8] {
			display: block;
			text-align: center;
			font-size: 20px;
			font-weight: 500;
			letter-spacing: 8px;
			color: #dddde2;
		}
		.error404-btn-con[data-v-2eb098b8] {
			text-align: center;
			padding: 20px 0;
			margin-bottom: 40px;
		}
		.error404-body-con-title span[data-v-2eb098b8] {
			display: inline-block;
			color: #19be6b;
			font-size: 130px;
			animation: error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
			-webkit-animation:error404animation-data-v-2eb098b8 3s ease 0s infinite alternate;
		}
		.el-button--text {
			color: #409EFF;
			background: 0 0;
			padding-left: 0;
			padding-right: 0;
		}
		.el-button {
			width: 125px;
			display: inline-block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			background: #fff;
			border: 1px solid #dcdfe6;
			color: #606266;
			-webkit-appearance: none;
			text-align: center;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			outline: 0;
			margin: 0;
			-webkit-transition: .1s;
			transition: .1s;
			font-weight: 500;
			padding: 12px 18px;
			font-size: 14px;
			border-radius: 4px;
		}
		.el-button--primary {
			color: #fff;
			background-color: #409EFF !important;
			border-color: #409EFF;
		}
	}

	/*

	/*
	大屏幕 ：大于等于1200px
	@media (min-width: 1200px) { ... }

	@media (min-width: 980px){...}

	平板电脑和小屏电脑之间的分辨率
	@media (min-width: 768px) and (max-width: 979px) { ... }

	横向放置的手机和竖向放置的平板之间的分辨率
	@media (max-width: 767px) { ... }

	横向放置的手机及分辨率更小的设备
	@media (max-width: 480px) { ... }
	*/
  </style>
 </head>

 <body style="width: 100%;height: 100%;margin: 0;padding: 0;">
    <div data-v-2eb098b8="" class="error404-body-con">
		<div data-v-2eb098b8="" class="el-card box-card is-always-shadow">
			<div class="el-card__body">
				<div data-v-2eb098b8="" class="error404-body-con-title">4<span data-v-2eb098b8="">0</span>4</div>
				<p data-v-2eb098b8="" class="error404-body-con-message">YOU&nbsp;&nbsp;LOOK&nbsp;&nbsp;LOST</p>
				<div data-v-2eb098b8="" class="error404-btn-con">
					<button data-v-2eb098b8="" type="button" class="el-button el-button--text el-button--large" ><!----><!----><span>返回首页</span></button>
					<button data-v-2eb098b8="" type="button" class="el-button el-button--primary el-button--large" style="margin-left: 40px;" onclick="window.history.back()"><!----><!----><span>返回上一页</span></button>
				</div>
			</div>
		</div>
	</div>
 </body>
</html>