sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add error page

Browse source
This commit is contained in:
Pan 2017-04-20 16:06:11 +08:00
parent 6eca8e4751
commit 1e90bc560b
6 changed files with 233 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/404.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/assets/404_cloud.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

16
src/router/index.js
View file

@ -7,9 +7,11 @@ import Layout from '../views/layout/Layout';
// dashboard
// import dashboard from '../views/dashboard/index';
const dashboard = resolve => require(['../views/dashboard/index'], resolve);
/* error*/
/* error page*/
const Err404 = resolve => require(['../views/error/404'], resolve);
const Err401 = resolve => require(['../views/error/401'], resolve);
/* login*/
import Login from '../views/login/';
import authRedirect from '../views/login/authredirect';
@ -37,6 +39,7 @@ const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
/* admin*/
// const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
// const QuicklyCreateUser = resolve => require(['../views/admin/quicklycreate'], resolve);
@ -98,6 +101,17 @@ export default new Router({
{ path: 'mixchart', component: MixChart, name: '混合图表' }
]
},
{
path: '/errorpage',
component: Layout,
redirect: 'noredirect',
name: '错误页面',
icon: 'tubiaoleixingzhengchang',
children: [
{ path: '401', component: Err401, name: '401' },
{ path: '404', component: Err404, name: '404' }
]
},
{
path: '/excel',
component: Layout,

1
src/views/error/401.vue
View file

@ -4,6 +4,7 @@
<el-row>
<el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1>
gif来源<a href='https://zh.airbnb.com/' target='_blank'>airbnb</a> 页面
<h2>你没有权限去该页面</h2>
<h6>如有不满请联系你领导</h6>
<ul class="list-unstyled">

220
src/views/error/404.vue
View file

@ -1,7 +1,217 @@
<template>
<div>404</div>
<div style="background:#f0f2f5;margin-top: -20px;">
<div class="wscn-http404">
<div class="pic-404">
<img class="pic-404__parent" src="../../assets/404.png" alt="404">
<img class="pic-404__child left" src="../../assets/404_cloud.png" alt="404">
<img class="pic-404__child mid" src="../../assets/404_cloud.png" alt="404">
<img class="pic-404__child right" src="../../assets/404_cloud.png" alt="404">
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
<a href="/" class="bullshit__return-home">返回首页</a>
</div>
</div>
</div>
</template>
<script>
export default {
computed: {
message() {
return '特朗普说这个页面你不能进......'
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.wscn-http404 {
position: relative;
width: 1200px;
margin: 20px auto 60px;
padding: 0 100px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
padding: 150px 0;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 150px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #1482f0;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>

4
src/views/layout/Sidebar.vue
View file

@ -7,7 +7,7 @@
{{item.name}}
</template>
<router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden"
class="title-link" :to="item.path+'/'+child.path + '#'+ +new Date()">
class="title-link" :to="item.path+'/'+child.path">
<el-menu-item :index="item.path+'/'+child.path">
{{child.name}}
</el-menu-item>
@ -16,7 +16,7 @@
<router-link v-if="item.noDropdown&&item.children.length>0" class="title-link"
:to="item.path+'/'+item.children[0].path">
<el-menu-item
:index="item.path+'/'+item.children[0].path +'#'+ +new Date()">
:index="item.path+'/'+item.children[0].path">
<wscn-icon-svg :icon-class="item.icon||'geren1'"/>
{{item.children[0].name}}
</el-menu-item>