404修改

src/main/resources/static/css/article/error.css

@@ -1,43 +1,45 @@
-body{background:#f6f6f6;position:relative}
-
-@media screen and (min-width:768px){
-body{min-width:1184px}
-    #errorContent{width:1200px !important;min-height:380px !important;height:auto !important;overflow:hidden;border:none;margin:auto;padding:100px 0 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
-    #errorContent p{color:#666666;font-size:20px;padding:30px 0}
-    #errorContent p span{color: #FF5B00;}
-    #errorContent a{width:190px;height:44px;text-align:center;background:#FF5B00;color:#fff;display:inline-block;line-height:44px;border-radius:2px}
-    #errorContent img {width: 380px;height:160px;}
-    .recommend{ position: relative; width:1200px; margin: 0 auto; padding: 20px 0 66px;}
-    .recommend .title{font-size: 16px; color: #4A4F58; text-align: left; margin-bottom: 24px; font-weight: bold;}
-    .recommend .list{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
-    .recommend .list .item{ width: 486px; display: flex; align-items: center;  margin-bottom: 32px; cursor: pointer;}
-    .recommend .list .item .cover{width: 98px;height: 68px; box-sizing: border-box; border: 1px dashed #EEEFF1;}
-    .recommend .list .item .cover img{display: block; width: 96px; height: 66px; flex-shrink: 0;}
-    .recommend .list .item .name{ font-size: 16px; color: #4A4F58; margin-left: 16px; flex: 1; line-height: 32px; text-align: justify;}
-    .recommend .list .item .name:hover{ color: #FF5B00; }
-    .recommend .page{position: absolute; right: 0; top: 100px; font-size: 0;}
-    .recommend .page span{position:relative; display: inline-block; width: 16px; height: 16px; background-color: #E2E2E2; margin-left: 16px; cursor: pointer; font-size: 0;}
-    .recommend .page span::after{ content: ""; display: block; width: 12px; height: 12px; position: absolute; left: 2px; top: 2px; background: url("/img/article/pc-icon-prev.png") no-repeat center; background-size: 12px;}
-    .recommend .page span.next::after{background-image: url("/img/article/pc-icon-next.png")}
-    .recommend .page span:hover{background-color: #FF5B00; }
-}
-@media screen and (max-width:768px){
-    #errorContent{width:100% !important;overflow:hidden;border:none;padding-top:23.7vw;display: flex;align-items: center;flex-direction: column;justify-content: space-between;}
-    #errorContent img{width:53.7vw;height:23.2vw}
-    #errorContent p{font-size:3.4vw;color:#666666;padding:7.8vw 7.8vw 5vw}
-    #errorContent p span{color: #FF5B00;}
-    #errorContent a{width:36vw;height:11.2vw;line-height:11.2vw;color:#fff;background:#FF5B00;border-radius:.53vw;display:inline-block}
-
-    .recommend{ position: relative; margin-top: 22vw;margin-bottom: 3.2vw;}
-    .recommend .title{font-size: 4vw; color: #4A4F58; text-align: left; margin-bottom: 4.8vw; font-weight: bold; padding: 0 4vw;}
-    .recommend .list{ padding: 0 4vw 8vw; }
-    .recommend .list .item{ display: flex; align-items: center;  margin-bottom: 3.2vw; cursor: pointer;}
-    .recommend .list .item .cover{ box-sizing: border-box; border: 0.2vw dashed #EEEFF1;}
-    .recommend .list .item .cover img{display: block; width: 25.8vw;height: 18vw; flex-shrink: 0;}
-    .recommend .list .item .name{ font-size: 3.4vw; color: #4A4F58; margin-left: 4vw; flex: 1; line-height: 6.4vw; text-align: justify;}
-    .recommend .page{position: absolute; right: 4vw; top: 0; font-size: 0;}
-    .recommend .page span{position:relative; display: inline-block; width: 4.8vw; height: 4.8vw; background-color: #E2E2E2; margin-left: 4vw; cursor: pointer; }
-    .recommend .page span::after{ content: ""; display: block; width: 3.2vw; height: 3.2vw; position: absolute; left: 0.8vw; top: 0.8vw; background: url("/img/article/h5-icon-prev.png") no-repeat center; background-size: 3.2vw;}
-    .recommend .page span.next::after{background-image: url("/img/article/h5-icon-next.png")}
-    .recommend .page span:hover{background-color: #FF5B00; }
-}
+body{background:#f6f6f6;position:relative}
+
+@media screen and (min-width:768px){
+body{min-width:1184px}
+    #errorContent{width:1200px !important;min-height:380px !important;height:auto !important;overflow:hidden;border:none;margin:auto;padding:100px 0 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
+    #errorContent p{color:#666666;font-size:20px;padding:30px 0}
+    #errorContent p span{color: #FF5B00;}
+    #errorContent a{width:190px;height:44px;text-align:center;background:#FF5B00;color:#fff;display:inline-block;line-height:44px;border-radius:2px}
+    #errorContent img {width: 380px;height:160px;}
+    .recommend{ position: relative; width:1200px; margin: 0 auto; padding: 20px 0 66px;}
+    .recommend .title{font-size: 16px; color: #4A4F58; text-align: left; margin-bottom: 24px; font-weight: bold;}
+    .recommend .list{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
+    .recommend .list .item{ width: 486px; display: flex; align-items: center;  margin-bottom: 32px; cursor: pointer;}
+    .recommend .list .item .cover{width: 98px;height: 68px; box-sizing: border-box; border: 1px dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 96px; height: 66px; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 16px; color: #4A4F58; margin-left: 16px; flex: 1; line-height: 32px; text-align: justify;}
+    .recommend .list .item .name:hover{ color: #FF5B00; }
+    .recommend .page{position: absolute; right: 0; top: 100px; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 16px; height: 16px; background-color: #E2E2E2; margin-left: 16px; cursor: pointer; font-size: 0;}
+    .recommend .page span::after{ content: ""; display: block; width: 12px; height: 12px; position: absolute; left: 2px; top: 2px; background: url("/img/article/pc-icon-prev.png") no-repeat center; background-size: 12px;}
+    .recommend .page span.next::after{background-image: url("/img/article/pc-icon-next.png")}
+    .recommend .page span:hover{background-color: #FF5B00; }
+}
+@media screen and (max-width:768px){
+    body{ background-color: #FFFFFF; }
+    #errorContent{width:100% !important;overflow:hidden;border:none;padding-top:55vw;display: flex;align-items: center;flex-direction: column;justify-content: space-between;}
+    #errorContent img{width:53.7vw;height:23.2vw}
+    #errorContent p{font-size:3.4vw;color:#666666;padding:7.8vw 7.8vw 5vw}
+    #errorContent p span{color: #FF5B00;}
+    #errorContent a{width:36vw;height:11.2vw;line-height:11.2vw;color:#fff;background:#FF5B00;border-radius:.53vw;display:inline-block}
+
+    .recommend{ position: relative; margin-top: 22vw;margin-bottom: 3.2vw;}
+    .recommend .title{font-size: 4vw; color: #4A4F58; text-align: left; margin-bottom: 4.8vw; font-weight: bold; padding: 0 4vw;}
+    .recommend .list{ padding: 0 4vw 8vw; }
+    .recommend .list .item{ display: flex; align-items: center;  margin-bottom: 3.2vw; cursor: pointer;}
+    .recommend .list .item .cover{ box-sizing: border-box; border: 0.2vw dashed #EEEFF1;}
+    .recommend .list .item .cover img{display: block; width: 25.8vw;height: 18vw; flex-shrink: 0;}
+    .recommend .list .item .name{ font-size: 3.4vw; color: #4A4F58; margin-left: 4vw; flex: 1; line-height: 6.4vw; text-align: justify;}
+    .recommend .page{position: absolute; right: 4vw; top: 0; font-size: 0;}
+    .recommend .page span{position:relative; display: inline-block; width: 4.8vw; height: 4.8vw; background-color: #E2E2E2; margin-left: 4vw; cursor: pointer; }
+    .recommend .page span::after{ content: ""; display: block; width: 3.2vw; height: 3.2vw; position: absolute; left: 0.8vw; top: 0.8vw; background: url("/img/article/h5-icon-prev.png") no-repeat center; background-size: 3.2vw;}
+    .recommend .page span.next::after{background-image: url("/img/article/h5-icon-next.png")}
+    .recommend .page span:hover{background-color: #FF5B00; }
+    footer{ display: none; }
+}

src/main/resources/templates/error/404.html

@@ -1,102 +1,104 @@
-<!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="https://www.thymeleaf.org ">
-<head>
-    <title>采美365网</title>
-    <template th:replace="components/head-link"></template>
-    <style>
-        body {
-            background: #f6f6f6;
-            position: relative;
-        }
-        /** PC端 */
-        @media screen and (min-width:768px){
-            body {
-                min-width: 1184px;
-            }
-            #errorContent{
-                width:1200px!important;
-                min-height:500px!important;
-                height:auto!important;
-                overflow: hidden;
-                border:none;
-                margin: auto;
-                padding: 160px;
-            }
-            #errorContent p{
-                color: #666666;
-                font-size: 20px;
-                padding: 60px;
-            }
-            #errorContent a{
-                width: 190px;
-                height: 44px;
-                text-align: center;
-                background: #FF5B00;
-                color: #fff;
-                display: inline-block;
-                line-height: 44px;
-                border-radius: 2px;
-            }
-
-
-        }
-        /** 移动端 */
-        @media screen and (max-width:768px){
-            #errorContent{
-                width: 100%!important;
-                min-height:100vw!important;
-                height:auto!important;
-                overflow: hidden;
-                border: none;
-                padding-top: 23.7vw;
-            }
-            #errorContent img{
-                 width: 53.7vw;
-                 height: 23.2vw;
-            }
-             #errorContent p{
-             font-size: 3.4vw;
-             color: #666666 ;
-             padding: 7.8vw 7.8vw 5vw;
-             }
-            #errorContent a{
-                width: 36vw;
-                height: 11.2vw;
-                line-height: 11.2vw;
-                color: #fff;
-                background: #FF5B00;
-                border-radius: .53vw;
-                display: inline-block;
-            }
-        }
-    </style>
-</head>
-<body>
-<!-- 引用头部 -->
-<template th:replace="components/header"></template>
-
-<!-- 404页面 -->
-<div style="text-align:center;background: #fff">
-<!--    <iframe id="errorContent" src="/search_children.html"></iframe>-->
-        <div id="errorContent">
-            <img src="/img/base/404.png">
-            <p>您访问的页面不存在，建议您......</p>
-            <a href="/index.html">返回首页</a>
-        </div>
-</div>
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<script type="text/javascript">
-    const matchInfo = window.location.pathname.indexOf("info") !== -1
-    if(!($('#coreServer').val() && $('#coreServer').val().length>0)){
-        if (matchInfo) {
-            window.location.href = '/info/404.html'
-        } else {
-            window.location.href = '/404.html';
-        }
-    }
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网</title>
+    <template th:replace="components/head-link"></template>
+    <style>
+        body {
+            background: #f6f6f6;
+            position: relative;
+        }
+        /** PC端 */
+        @media screen and (min-width:768px){
+            body {
+                min-width: 1184px;
+            }
+            #errorContent{
+                width:1200px!important;
+                min-height:500px!important;
+                height:auto!important;
+                overflow: hidden;
+                border:none;
+                margin: auto;
+                padding: 160px;
+            }
+            #errorContent p{
+                color: #666666;
+                font-size: 20px;
+                padding: 60px;
+            }
+            #errorContent a{
+                width: 190px;
+                height: 44px;
+                text-align: center;
+                background: #FF5B00;
+                color: #fff;
+                display: inline-block;
+                line-height: 44px;
+                border-radius: 2px;
+            }
+
+
+        }
+        /** 移动端 */
+        @media screen and (max-width:768px){
+            body{ background-color: #FFFFFF; }
+            #errorContent{
+                width: 100%!important;
+                min-height:100vw!important;
+                height:auto!important;
+                overflow: hidden;
+                border: none;
+                padding-top: 56vw;
+            }
+            #errorContent img{
+                 width: 53.7vw;
+                 height: 23.2vw;
+            }
+             #errorContent p{
+             font-size: 3.4vw;
+             color: #666666 ;
+             padding: 7.8vw 7.8vw 5vw;
+             }
+            #errorContent a{
+                width: 36vw;
+                height: 11.2vw;
+                line-height: 11.2vw;
+                color: #fff;
+                background: #FF5B00;
+                border-radius: .53vw;
+                display: inline-block;
+            }
+            footer{ display: none; }
+        }
+    </style>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 404页面 -->
+<div style="text-align:center;background: #fff">
+<!--    <iframe id="errorContent" src="/search_children.html"></iframe>-->
+        <div id="errorContent">
+            <img src="/img/base/404.png">
+            <p>您访问的页面不存在，建议您......</p>
+            <a href="/index.html">返回首页</a>
+        </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script type="text/javascript">
+    const matchInfo = window.location.pathname.indexOf("info") !== -1
+    if(!($('#coreServer').val() && $('#coreServer').val().length>0)){
+        if (matchInfo) {
+            window.location.href = '/info/404.html'
+        } else {
+            window.location.href = '/404.html';
+        }
+    }
+</script>
+</body>
+</html>