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 home from "@/components/Home/HomePage.vue";
|
||||
import hotNews from "@/components/HotNews/HotNews.vue";
|
||||
import navDetail from "@/components/Detail/NavDetail.vue";
|
||||
import notFound from "@/components/NotFound/NotFound.vue";
|
||||
|
||||
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
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')
|
||||
module.exports = defineConfig({
|
||||
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