diff --git a/mes/src/main/resources/static/css/404.css b/mes/src/main/resources/static/css/404.css
new file mode 100644
index 0000000..df48335
--- /dev/null
+++ b/mes/src/main/resources/static/css/404.css
@@ -0,0 +1,197 @@
+/*
+ * 作者: QYZQ
+ * 时间:2018.2.4
+ * 备注:404页面设计灵感源于FreePik网站图片(https://www.freepik.com/free-vector/funny-error-404-background-design_1161579.htm#term=404&page=1&position=2),
+ * 		FreePik网站提供免费下载渠道,网站也有提示侵权的通知,如有侵权请联系(Email: greatyuzequn@outlook.com),QYZQ将及时处理.
+ */
+
+body, div, p, a{
+	margin: 0px;
+	padding: 0px;
+}
+
+p{
+	text-decoration: none;
+	user-select: none;
+}
+
+html, body{
+	width: 100%;
+	height: 100%;
+}
+
+body{
+	background: linear-gradient(#c7c8cf,#e8e8e9,#c7c8cf);
+	overflow: hidden;
+}
+
+.code{
+	display: block;
+	width: 100%;
+	height: 120px;
+	line-height: 120px;
+}
+
+.code p{
+	height: inherit;
+	line-height: inherit;
+	text-align: center;
+	font-family: BalboaWide Bold;
+	font-size: 50px;
+	color: #697a8a;
+	opacity: 1;
+}
+
+.road{
+	width: 100%;
+	height: 600px;
+}
+
+.road .shadow{
+	position: relative;
+	margin: auto;
+	margin-top: 25%;
+	width: 330px;
+	height: 70px;
+	border:0px;
+	background: linear-gradient(#777373,#3c3c3c);
+	box-shadow: 0px 3px 10px 2px #464646, 0px -3px 10px 2px #3a3939 inset;
+	border-radius: 100%;
+}
+
+.road p{
+	display: block;
+	margin-top: 50px;
+	height: inherit;
+	line-height: inherit;
+	text-align: center;
+	font-family: BalboaWide Bold;
+	font-size: 30px;
+	color: #697a8a;
+	opacity: 1;
+}
+.road .shadow .bubble{
+	display: block;
+	position: absolute;
+	top: -180px;
+	left: 350px;
+	width: 246px;
+	height: 179px;
+	background-image: url(../image/bubble.png);
+	background-repeat: no-repeat;
+	text-align: center;
+}
+
+.road .shadow .bubble a{
+	line-height: 140px;
+	font-family: "microsoft yahei";
+	font-size: 1.5em;
+	color: #F8F8F5;
+	letter-spacing: 1px;
+	text-decoration: none;
+	transition: 1s;
+	user-select:none;
+}
+
+.road .shadow .bubble a:hover{
+	color: #FF8C00;
+}
+
+.road .shadow .shelt{
+	position: absolute;
+	margin: auto;
+	margin-top: -80px;
+	width: 330px;
+	height: 150px;
+	border:0px;
+	border-radius: 100%;
+	overflow: hidden;
+	background: transparent;
+}
+.road .shadow .head{
+	position: absolute;
+	left: 50%;
+	margin-left: -60px;
+	top: 150px;
+	width: 120px;
+	height: 300px;
+	border: 0px;
+	border-radius: 100% 100% 0 0;
+	background-color: #292d38;
+}
+
+.road .shadow .head .eyes{
+	width: 100%;
+	height: 50px;
+	margin-top: 70px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-around;
+}
+
+.road .shadow .head .eyes .lefteye,.road .shadow .head .eyes .righteye{
+	position: relative;
+	width: 38px;
+	height: 38px;
+	border-radius: 100%;
+	background-color: #f1f2f4;
+}
+
+.road .shadow .head .eyes .lefteye .eyebrow{
+	position: absolute;
+	width: 38px;
+	left: 0px;
+	top: 0px;
+	height: 19px;
+	border-radius: 19px 19px 0 0;
+	background-color:#4c5465;
+	clip: rect(0px 38px 0px 0px);
+}
+
+.road .shadow .head .eyes .righteye .eyebrow{
+	position: absolute;
+	width: 38px;
+	left: 0px;
+	top: 0px;
+	height: 19px;
+	border-radius: 19px 19px 0 0;
+	background-color:#4c5465;
+	clip: rect(0px 38px 0px 0px);
+}
+
+
+.road .shadow .head .eyes .lefteye .eyeball{
+	position: absolute;
+	width: 10px;
+	left: 50%;
+	top: 50%;
+	margin-top: -5px;
+	margin-left: -5px;
+	height: 10px;
+	border-radius: 100%;
+	background-color:#292d38 ;
+}
+
+.road .shadow .head .eyes .righteye .eyeball{
+	position: absolute;
+	width: 10px;
+	left: 50%;
+	top: 50%;
+	margin-top: -5px;
+	margin-left: -5px;
+	height: 10px;
+	border-radius: 100%;
+	background-color:#292d38 ;
+}
+
+.road .shadow .hat{
+	position: absolute;
+	top: -297px;
+	left: -8px;
+	width: 330px;
+	height: 330px;
+	background: url(../image/sign.png) no-repeat;
+	transform-origin: left bottom;
+	transform: rotate(17deg);
+}
diff --git a/mes/src/main/resources/static/image/bubble.png b/mes/src/main/resources/static/image/bubble.png
new file mode 100644
index 0000000..1bba1ea
Binary files /dev/null and b/mes/src/main/resources/static/image/bubble.png differ
diff --git a/mes/src/main/resources/static/image/sign.png b/mes/src/main/resources/static/image/sign.png
new file mode 100644
index 0000000..1cb8f6e
Binary files /dev/null and b/mes/src/main/resources/static/image/sign.png differ
diff --git a/mes/src/main/resources/static/js/layuimodule/404.js b/mes/src/main/resources/static/js/layuimodule/404.js
new file mode 100644
index 0000000..6c1ba07
--- /dev/null
+++ b/mes/src/main/resources/static/js/layuimodule/404.js
@@ -0,0 +1,62 @@
+var parallel = 17;
+var headHeight = 150;
+var opacity = 0;
+var eyeBrowHeight = 0;
+var step = 1;
+var timer_show;
+var timer_eyebrow;
+
+document.onmousemove = mouseMove;
+
+function mouseMove(e){
+	/*眼球转动*/
+}
+
+function startAnimation(){
+	timer_show = setInterval('rotateCounterclockwise()', 55);
+	window.setTimeout(function(){
+		window.clearInterval(timer_eyebrow);
+		timer_show = setInterval('rotateClockwise()', 55);
+	},1000*6);
+}
+
+function rotateCounterclockwise() {
+	parallel = parallel - 0.3;
+	headHeight = headHeight - 2.5;
+	opacity = (17 - parallel)/17;
+	if(parallel > 0) {
+		$('.head').css('top',headHeight+'px');
+		$('.hat').css('transform', 'rotate(' + parallel + 'deg)');
+//		$('.code p').css('opacity',opacity);
+		$('.bubble').css('opacity',opacity);
+	}else{
+		window.clearInterval(timer_show);
+		timer_eyebrow = setInterval('flash()',10);
+		
+	}
+}
+
+function rotateClockwise() {
+	parallel = parallel + 0.3;
+	headHeight = headHeight + 2.5;
+	opacity = (17 - parallel)/17;
+	if(parallel <= 17) {
+		$('.head').css('top',headHeight+'px');
+		$('.hat').css('transform', 'rotate(' + parallel + 'deg)');
+//		$('.code p').css('opacity',opacity);
+		$('.bubble').css('opacity',opacity);
+	}else{
+		window.clearInterval(timer_show);
+		startAnimation();
+	}
+}
+
+function flash(){
+	eyeBrowHeight += step;
+	$('.lefteye .eyebrow').css('clip','rect(0px 38px ' + eyeBrowHeight + 'px 0px)');
+	$('.righteye .eyebrow').css('clip','rect(0px 38px ' + eyeBrowHeight + 'px 0px)');
+	if(eyeBrowHeight % 19 === 0)
+		step = -step;
+}
+
+startAnimation();
\ No newline at end of file
diff --git a/mes/src/main/resources/templates/error/404.ftl b/mes/src/main/resources/templates/error/404.ftl
index a159ae1..ba8d052 100644
--- a/mes/src/main/resources/templates/error/404.ftl
+++ b/mes/src/main/resources/templates/error/404.ftl
@@ -1,109 +1,39 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <title>404</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta http-equiv="Access-Control-Allow-Origin" content="*">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="format-detection" content="telephone=no">
-    <#include "${request.contextPath}/common/common.ftl">
-    <style>
-        .error .clip .shadow {height:180px;}
-        .error .clip:nth-of-type(2) .shadow {width:130px;}
-        .error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:250px;}
-        .error .digit {width:150px;height:150px;line-height:150px;font-size:120px;font-weight:bold;}
-        .error h2 {font-size:32px;}
-        .error .msg {top:-190px;left:30%;width:80px;height:80px;line-height:80px;font-size:32px;}
-        .error span.triangle {top:70%;right:0%;border-left:20px solid #535353;border-top:15px solid transparent;border-bottom:15px solid transparent;}
-        .error .container-error-404 {top: 50%;margin-top: 250px;position:relative;height:250px;padding-top:40px;}
-        .error .container-error-404 .clip {display:inline-block;transform:skew(-45deg);}
-        .error .clip .shadow {overflow:hidden;}
-        .error .clip:nth-of-type(2) .shadow {overflow:hidden;position:relative;box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);}
-        .error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {content:"";position:absolute;right:-8px;bottom:0px;z-index:9999;height:100%;width:10px;background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);border-radius:50%;}
-        .error .clip:nth-of-type(3) .shadow:after {left:-8px;}
-        .error .digit {position:relative;top:8%;color:white;background:#1aa094;border-radius:50%;display:inline-block;transform:skew(45deg);}
-        .error .clip:nth-of-type(2) .digit {left:-10%;}
-        .error .clip:nth-of-type(1) .digit {right:-20%;}
-        .error .clip:nth-of-type(3) .digit {left:-20%;}
-        .error h2 {font-size:24px;color:#A2A2A2;font-weight:bold;padding-bottom:20px;}
-        .error .tohome {font-size:16px;color:#07B3F9;}
-        .error .msg {position:relative;z-index:9999;display:block;background:#535353;color:#A2A2A2;border-radius:50%;font-style:italic;}
-        .error .triangle {position:absolute;z-index:999;transform:rotate(45deg);content:"";width:0;height:0;}
-        @media(max-width:767px) {.error .clip .shadow {height:100px;}
-            .error .clip:nth-of-type(2) .shadow {width:80px;}
-            .error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:100px;}
-            .error .digit {width:80px;height:80px;line-height:80px;font-size:52px;}
-            .error h2 {font-size:18px;}
-            .error .msg {top:-110px;left:15%;width:40px;height:40px;line-height:40px;font-size:18px;}
-            .error span.triangle {top:70%;right:-3%;border-left:10px solid #535353;border-top:8px solid transparent;border-bottom:8px solid transparent;}
-            .error .container-error-404 {height:150px;}
-        }
-    </style>
+    <meta charset="utf-8">
+    <title>你的资源掉了！</title>
+    <meta name="viewpoint" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="${request.contextPath}/css/404.css" />
+    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 </head>
 <body>
-<div class="error">
-    <div class="container-floud">
-        <div style="text-align: center">
-            <div class="container-error-404">
-                <div class="clip">
-                    <div class="shadow">
-                        <span class="digit thirdDigit"></span>
+<div class="code">
+    <p>ERROR 404</p>
+</div>
+<div class="road">
+    <div class="shadow">
+        <div class="shelt">
+            <div class="head">
+                <div class="eyes">
+                    <div class="lefteye">
+                        <div class="eyeball"></div>
+                        <div class="eyebrow"></div>
                     </div>
-                </div>
-                <div class="clip">
-                    <div class="shadow">
-                        <span class="digit secondDigit"></span>
+                    <div class="righteye">
+                        <div class="eyeball"></div>
+                        <div class="eyebrow"></div>
                     </div>
                 </div>
-                <div class="clip">
-                    <div class="shadow">
-                        <span class="digit firstDigit"></span>
-                    </div>
-                </div>
-                <div class="msg">OH!
-                    <span class="triangle"></span>
-                </div>
             </div>
-            <h2 class="h1">很抱歉，你访问的页面找不到了</h2>
+        </div>
+        <div class="hat"></div>
+        <div class="bubble">
+            <a href="index.html">功能开发中！</a>
         </div>
     </div>
+    <p>修身正心，齐家治国</p>
 </div>
-<script>
-    function randomNum() {
-        return Math.floor(Math.random() * 9) + 1;
-    }
-
-    var loop1, loop2, loop3, time = 30, i = 0, number;
-    loop3 = setInterval(function () {
-        if (i > 40) {
-            clearInterval(loop3);
-            document.querySelector('.thirdDigit').textContent = 4;
-        } else {
-            document.querySelector('.thirdDigit').textContent = randomNum();
-            i++;
-        }
-    }, time);
-    loop2 = setInterval(function () {
-        if (i > 80) {
-            clearInterval(loop2);
-            document.querySelector('.secondDigit').textContent = 0;
-        } else {
-            document.querySelector('.secondDigit').textContent = randomNum();
-            i++;
-        }
-    }, time);
-    loop1 = setInterval(function () {
-        if (i > 100) {
-            clearInterval(loop1);
-            document.querySelector('.firstDigit').textContent = 4;
-        } else {
-            document.querySelector('.firstDigit').textContent = randomNum();
-            i++;
-        }
-    }, time);
-</script>
 </body>
-</html>
\ No newline at end of file
+<script type="text/javascript" src="${request.contextPath}/js/layuimodule/404.js" ></script>
+</html>
diff --git a/mes/src/main/resources/templates/error/404old.ftl b/mes/src/main/resources/templates/error/404old.ftl
new file mode 100644
index 0000000..aba6b5f
--- /dev/null
+++ b/mes/src/main/resources/templates/error/404old.ftl
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>404</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta http-equiv="Access-Control-Allow-Origin" content="*">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="format-detection" content="telephone=no">
+    <#include "${request.contextPath}/common/common.ftl">
+    <style>
+        .error .clip .shadow {height:180px;}
+        .error .clip:nth-of-type(2) .shadow {width:130px;}
+        .error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:250px;}
+        .error .digit {width:150px;height:150px;line-height:150px;font-size:120px;font-weight:bold;}
+        .error h2 {font-size:32px;}
+        .error .msg {top:-190px;left:30%;width:80px;height:80px;line-height:80px;font-size:32px;}
+        .error span.triangle {top:70%;right:0%;border-left:20px solid #535353;border-top:15px solid transparent;border-bottom:15px solid transparent;}
+        .error .container-error-404 {top: 50%;margin-top: 250px;position:relative;height:250px;padding-top:40px;}
+        .error .container-error-404 .clip {display:inline-block;transform:skew(-45deg);}
+        .error .clip .shadow {overflow:hidden;}
+        .error .clip:nth-of-type(2) .shadow {overflow:hidden;position:relative;box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);}
+        .error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {content:"";position:absolute;right:-8px;bottom:0px;z-index:9999;height:100%;width:10px;background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);border-radius:50%;}
+        .error .clip:nth-of-type(3) .shadow:after {left:-8px;}
+        .error .digit {position:relative;top:8%;color:white;background:#1aa094;border-radius:50%;display:inline-block;transform:skew(45deg);}
+        .error .clip:nth-of-type(2) .digit {left:-10%;}
+        .error .clip:nth-of-type(1) .digit {right:-20%;}
+        .error .clip:nth-of-type(3) .digit {left:-20%;}
+        .error h2 {font-size:24px;color:#A2A2A2;font-weight:bold;padding-bottom:20px;}
+        .error .tohome {font-size:16px;color:#07B3F9;}
+        .error .msg {position:relative;z-index:9999;display:block;background:#535353;color:#A2A2A2;border-radius:50%;font-style:italic;}
+        .error .triangle {position:absolute;z-index:999;transform:rotate(45deg);content:"";width:0;height:0;}
+        @media(max-width:767px) {.error .clip .shadow {height:100px;}
+            .error .clip:nth-of-type(2) .shadow {width:80px;}
+            .error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {width:100px;}
+            .error .digit {width:80px;height:80px;line-height:80px;font-size:52px;}
+            .error h2 {font-size:18px;}
+            .error .msg {top:-110px;left:15%;width:40px;height:40px;line-height:40px;font-size:18px;}
+            .error span.triangle {top:70%;right:-3%;border-left:10px solid #535353;border-top:8px solid transparent;border-bottom:8px solid transparent;}
+            .error .container-error-404 {height:150px;}
+        }
+    </style>
+</head>
+<body>
+<div class="error">
+    <div class="container-floud">
+        <div style="text-align: center">
+            <div class="container-error-404">
+                <div class="clip">
+                    <div class="shadow">
+                        <span class="digit thirdDigit"></span>
+                    </div>
+                </div>
+                <div class="clip">
+                    <div class="shadow">
+                        <span class="digit secondDigit"></span>
+                    </div>
+                </div>
+                <div class="clip">
+                    <div class="shadow">
+                        <span class="digit firstDigit"></span>
+                    </div>
+                </div>
+                <div class="msg">OH!
+                    <span class="triangle"></span>
+                </div>
+            </div>
+            <h2 class="h1">功能正在开发中！！请耐心等待</h2>
+        </div>
+    </div>
+</div>
+<script>
+    function randomNum() {
+        return Math.floor(Math.random() * 9) + 1;
+    }
+
+    var loop1, loop2, loop3, time = 30, i = 0, number;
+    loop3 = setInterval(function () {
+        if (i > 40) {
+            clearInterval(loop3);
+            document.querySelector('.thirdDigit').textContent = 4;
+        } else {
+            document.querySelector('.thirdDigit').textContent = randomNum();
+            i++;
+        }
+    }, time);
+    loop2 = setInterval(function () {
+        if (i > 80) {
+            clearInterval(loop2);
+            document.querySelector('.secondDigit').textContent = 0;
+        } else {
+            document.querySelector('.secondDigit').textContent = randomNum();
+            i++;
+        }
+    }, time);
+    loop1 = setInterval(function () {
+        if (i > 100) {
+            clearInterval(loop1);
+            document.querySelector('.firstDigit').textContent = 4;
+        } else {
+            document.querySelector('.firstDigit').textContent = randomNum();
+            i++;
+        }
+    }, time);
+</script>
+</body>
+</html>
\ No newline at end of file