加入原创的404页面

src/components/ContactUs.vue

@@ -25,7 +25,7 @@ export default {
     height: 33px;
   }
 
-  @include media-breakpoint-between(md, xl) {
+  @include media-breakpoint-up(md) {
     height: 0px;
   }
 }

src/components/Tools/Err404.vue

@@ -1,5 +1,14 @@
 <template>
-
+  <div id="ErrRoot">
+    <div id="upbarErr"></div>
+    <div id="ErrContent">
+      <div>
+        <span class="itemtitle">404:Not Found</span>
+        <br/>
+        <span class="itemcontent">您要找的页面不存在，<a href="/">返回主页</a></span>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -8,6 +17,85 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
+#upbarErr{
+  position: relative;
+  flex:1;
+  width: 100%;
+  flex-shrink: 0;
+  @include media-breakpoint-between(xs, md) {
+    min-height: 70px!important;
+  }
+
+  @include media-breakpoint-up(md) {
+    //min-height: 95.17px!important;
+    min-height: 95.17px!important;
+  }
+}
+
+#ErrContent{
+  position: relative;
+  flex:2;
+  display: flex;
+  background-color: black;
+  width:100%;
+  align-items: center;
+  justify-content: center;
+  //height: 100%;
+  @include media-breakpoint-between(xs, md) {
+    min-height: 614px;
+  }
+  @include media-breakpoint-up(md) {
+    min-height: 338px;
+  }
+}
+
+#ErrRoot{
+  position: relative;
+  flex:1;
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+  margin-top: 0px;
+  align-items: center;
+  justify-content: center;
+  width:100%;
+  min-height: 100%;
+
+  @include media-breakpoint-between(xs, md) {
+    //min-height:700px;
+  }
+
+  @include media-breakpoint-up(md) {
+    //min-height: 700px;
+  }
+}
+.itemtitle
+{
+  width: 280px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 20px;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  line-height: 30px;
+  display: inline-block;
+}
+.itemcontent
+{
+  width: 280px;
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  line-height: 30px;
+  display: inline-block;
+}
 
 </style>

src/router.js

@@ -15,6 +15,15 @@ const routes= [
         path: '/Aboutus',
         name: 'Aboutus',
         component: ()=>import('./components/Aboutus.vue')
+    },
+    {
+        path: '/Err404',
+        name: 'Err404',
+        component: ()=>import('./components/Tools/Err404.vue')
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/Err404'
     }
 ]