add 404 page
This commit is contained in:
BIN
src/assets/img/qr.png
Normal file
BIN
src/assets/img/qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
151
src/components/NotFound/NotFound.vue
Normal file
151
src/components/NotFound/NotFound.vue
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<body translate="no">
|
||||||
|
<div id="page">
|
||||||
|
<div id="container">
|
||||||
|
<h1>:(</h1>
|
||||||
|
<h2>Your PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for
|
||||||
|
you.</h2>
|
||||||
|
<h2>
|
||||||
|
<span id="percentage">58</span>% complete</h2>
|
||||||
|
<div id="details">
|
||||||
|
<div id="qr">
|
||||||
|
<div id="image">
|
||||||
|
<img src="../../assets/img/qr.png" alt="QR Code">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="stopcode">
|
||||||
|
<h4>For more information about this issue and possible fixes, visit
|
||||||
|
<br>http://xontab.com/stopcode</h4>
|
||||||
|
<h5>If you call a support person, give them this info:
|
||||||
|
<br>Stop Code: 404 PAGE NOT FOUND</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"NotFound",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}},
|
||||||
|
mounted() {
|
||||||
|
this.processInterval();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
process(){
|
||||||
|
var percentageElement = document.getElementById("percentage");
|
||||||
|
var percentage = 0;
|
||||||
|
percentage += parseInt(Math.random() * 10);
|
||||||
|
if (percentage > 100) {
|
||||||
|
percentage = 100;
|
||||||
|
}
|
||||||
|
percentageElement.innerText = percentage;
|
||||||
|
this.processInterval();
|
||||||
|
},
|
||||||
|
processInterval(){
|
||||||
|
setTimeout(this.process, Math.random() * (1000 - 500) + 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
body {
|
||||||
|
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
|
||||||
|
background: #3973aa;
|
||||||
|
color: #fefeff;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page {
|
||||||
|
display: table;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -10px;
|
||||||
|
width: 70%;
|
||||||
|
font-size: 1.9vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5 {
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0;
|
||||||
|
margin: 25px 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 6.5em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.4em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
line-height: 1.1em;
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#details {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#qr {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image {
|
||||||
|
background: white;
|
||||||
|
padding: 5px;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#image img {
|
||||||
|
width: 9.8em;
|
||||||
|
height: 9.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stopcode {
|
||||||
|
padding-left: 10px;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 840px) {
|
||||||
|
#page {
|
||||||
|
font-size: 140%;
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,8 +1,13 @@
|
|||||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
import {createRouter, createWebHashHistory } from 'vue-router'
|
||||||
import index from '../views/Index.vue'
|
import index from '../views/Index.vue'
|
||||||
import home from "@/components/Home/HomePage.vue";
|
import home from "@/components/Home/HomePage.vue";
|
||||||
import hotNews from "@/components/HotNews/HotNews.vue";
|
import hotNews from "@/components/HotNews/HotNews.vue";
|
||||||
import navDetail from "@/components/Detail/NavDetail.vue";
|
import navDetail from "@/components/Detail/NavDetail.vue";
|
||||||
|
import notFound from "@/components/NotFound/NotFound.vue";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
@@ -30,6 +35,17 @@ const routes = [
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/404',
|
||||||
|
name: 'NoPage404',
|
||||||
|
component: notFound,
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)',
|
||||||
|
redirect: '/404',
|
||||||
|
hidden: true
|
||||||
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,44 @@
|
|||||||
const { defineConfig } = require('@vue/cli-service')
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true,
|
transpileDependencies: true,
|
||||||
|
devServer: {
|
||||||
|
client: {
|
||||||
|
overlay: false // 编译错误时，取消全屏覆盖
|
||||||
|
},
|
||||||
|
proxy: {
|
||||||
|
|
||||||
|
'/api': {
|
||||||
|
//后端接口的baseurl
|
||||||
|
target: 'http://localhost:8082/helloGithub_war_exploded',
|
||||||
|
//是否允许跨域
|
||||||
|
changeOrigin: true,
|
||||||
|
// ws: true, //是否代理 websockets
|
||||||
|
// secure: true,
|
||||||
|
// 'secure': true,
|
||||||
|
headers: {
|
||||||
|
Connection: "kepp-alive"
|
||||||
|
},
|
||||||
|
pathRewrite: {
|
||||||
|
//这里的作用是使用去掉api
|
||||||
|
'^/api': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'/image': {
|
||||||
|
//后端接口的baseurl
|
||||||
|
target: 'https://tucdn.wpon.cn/api/',
|
||||||
|
//是否允许跨域
|
||||||
|
changeOrigin: true,
|
||||||
|
// ws: true, //是否代理 websockets
|
||||||
|
// secure: true,
|
||||||
|
// 'secure': true,
|
||||||
|
headers: {
|
||||||
|
Connection: "kepp-alive"
|
||||||
|
},
|
||||||
|
pathRewrite: {
|
||||||
|
//这里的作用是使用去掉api
|
||||||
|
'^/image': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user