Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
81f92c0a by 任超
Options

1

1 parent f9be9a39
Inline Side-by-side
Showing 6 changed files with 0 additions and 345 deletions
...@@ -31,16 +31,6 @@ export const constantRoutes = [ ...@@ -31,16 +31,6 @@ export const constantRoutes = [
31 hidden: true 31 hidden: true
32 }, 32 },
33 { 33 {
34 path: '/404',
35 component: () => import('@/views/error-page/404'),
36 hidden: true
37 },
38 {
39 path: '/401',
40 component: () => import('@/views/error-page/401'),
41 hidden: true
42 },
43 {
44 path: '/', 34 path: '/',
45 component: Layout, 35 component: Layout,
46 redirect: '/home', 36 redirect: '/home',
......
1 <template>
2 <div class="errPage-container">
3 <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
4 返回
5 </el-button>
6 <el-row>
7 <el-col :span="12">
8 <h1 class="text-jumbo text-ginormous">
9 Oops!
10 </h1>
11 gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
12 <h2>你没有权限去该页面</h2>
13 <h6>如有不满请联系你领导</h6>
14 <ul class="list-unstyled">
15 <li>或者你可以去:</li>
16 <li class="link-type">
17 <router-link to="/home">
18 回首页
19 </router-link>
20 </li>
21 <li class="link-type">
22 <a href="https://www.taobao.com/">随便看看</a>
23 </li>
24 <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
25 </ul>
26 </el-col>
27 <el-col :span="12">
28 <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
29 </el-col>
30 </el-row>
31 <el-dialog :visible.sync="dialogVisible" title="随便看">
32 <img :src="ewizardClap" class="pan-img">
33 </el-dialog>
34 </div>
35 </template>
36
37 <script>
38 import errGif from '@/assets/401_images/401.gif'
39
40 export default {
41 name: 'Page401',
42 data() {
43 return {
44 errGif: errGif + '?' + +new Date(),
45 ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
46 dialogVisible: false
47 }
48 },
49 methods: {
50 back() {
51 if (this.$route.query.noGoBack) {
52 this.$router.push({ path: '/dashboard' })
53 } else {
54 this.$router.go(-1)
55 }
56 }
57 }
58 }
59 </script>
60
61 <style lang="scss" scoped>
62 .errPage-container {
63 width: 800px;
64 max-width: 100%;
65 margin: 100px auto;
66 .pan-back-btn {
67 background: #008489;
68 color: #fff;
69 border: none!important;
70 }
71 .pan-gif {
72 margin: 0 auto;
73 display: block;
74 }
75 .pan-img {
76 display: block;
77 margin: 0 auto;
78 width: 100%;
79 }
80 .text-jumbo {
81 font-size: 60px;
82 font-weight: 700;
83 color: #484848;
84 }
85 .list-unstyled {
86 font-size: 14px;
87 li {
88 padding-bottom: 5px;
89 }
90 a {
91 color: #008489;
92 text-decoration: none;
93 &:hover {
94 text-decoration: underline;
95 }
96 }
97 }
98 }
99 </style>
1 <template>
2 <div class="wscn-http404-container">
3 <div class="wscn-http404">
4 <div class="pic-404">
5 <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
6 <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
7 <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
8 <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
9 </div>
10 <div class="bullshit">
11 <div class="bullshit__oops">OOPS!</div>
12 <div class="bullshit__info">All rights reserved
13 <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
14 </div>
15 <div class="bullshit__headline">{{ message }}</div>
16 <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
17 <a @click='nextTo' class="bullshit__return-home">回到主页</a>
18 </div>
19 </div>
20 </div>
21 </template>
22
23 <script>
24
25 export default {
26 name: 'Page404',
27 computed: {
28 message() {
29 return 'The webmaster said that you can not enter this page...'
30 }
31 },
32 methods:{
33 nextTo(){
34 this.$router.push({
35 path: this.redirect || '/',
36 query: this.otherQuery
37 })
38 },
39 }
40 }
41 </script>
42
43 <style lang="scss" scoped>
44 .wscn-http404-container{
45 transform: translate(-50%,-50%);
46 position: absolute;
47 top: 40%;
48 left: 50%;
49 }
50 .wscn-http404 {
51 position: relative;
52 width: 1200px;
53 padding: 0 50px;
54 overflow: hidden;
55 .pic-404 {
56 position: relative;
57 float: left;
58 width: 600px;
59 overflow: hidden;
60 &__parent {
61 width: 100%;
62 }
63 &__child {
64 position: absolute;
65 &.left {
66 width: 80px;
67 top: 17px;
68 left: 220px;
69 opacity: 0;
70 animation-name: cloudLeft;
71 animation-duration: 2s;
72 animation-timing-function: linear;
73 animation-fill-mode: forwards;
74 animation-delay: 1s;
75 }
76 &.mid {
77 width: 46px;
78 top: 10px;
79 left: 420px;
80 opacity: 0;
81 animation-name: cloudMid;
82 animation-duration: 2s;
83 animation-timing-function: linear;
84 animation-fill-mode: forwards;
85 animation-delay: 1.2s;
86 }
87 &.right {
88 width: 62px;
89 top: 100px;
90 left: 500px;
91 opacity: 0;
92 animation-name: cloudRight;
93 animation-duration: 2s;
94 animation-timing-function: linear;
95 animation-fill-mode: forwards;
96 animation-delay: 1s;
97 }
98 @keyframes cloudLeft {
99 0% {
100 top: 17px;
101 left: 220px;
102 opacity: 0;
103 }
104 20% {
105 top: 33px;
106 left: 188px;
107 opacity: 1;
108 }
109 80% {
110 top: 81px;
111 left: 92px;
112 opacity: 1;
113 }
114 100% {
115 top: 97px;
116 left: 60px;
117 opacity: 0;
118 }
119 }
120 @keyframes cloudMid {
121 0% {
122 top: 10px;
123 left: 420px;
124 opacity: 0;
125 }
126 20% {
127 top: 40px;
128 left: 360px;
129 opacity: 1;
130 }
131 70% {
132 top: 130px;
133 left: 180px;
134 opacity: 1;
135 }
136 100% {
137 top: 160px;
138 left: 120px;
139 opacity: 0;
140 }
141 }
142 @keyframes cloudRight {
143 0% {
144 top: 100px;
145 left: 500px;
146 opacity: 0;
147 }
148 20% {
149 top: 120px;
150 left: 460px;
151 opacity: 1;
152 }
153 80% {
154 top: 180px;
155 left: 340px;
156 opacity: 1;
157 }
158 100% {
159 top: 200px;
160 left: 300px;
161 opacity: 0;
162 }
163 }
164 }
165 }
166 .bullshit {
167 position: relative;
168 float: left;
169 width: 300px;
170 padding: 30px 0;
171 overflow: hidden;
172 &__oops {
173 font-size: 32px;
174 font-weight: bold;
175 line-height: 40px;
176 color: #1482f0;
177 opacity: 0;
178 margin-bottom: 20px;
179 animation-name: slideUp;
180 animation-duration: 0.5s;
181 animation-fill-mode: forwards;
182 }
183 &__headline {
184 font-size: 20px;
185 line-height: 24px;
186 color: #222;
187 font-weight: bold;
188 opacity: 0;
189 margin-bottom: 10px;
190 animation-name: slideUp;
191 animation-duration: 0.5s;
192 animation-delay: 0.1s;
193 animation-fill-mode: forwards;
194 }
195 &__info {
196 font-size: 13px;
197 line-height: 21px;
198 color: grey;
199 opacity: 0;
200 margin-bottom: 30px;
201 animation-name: slideUp;
202 animation-duration: 0.5s;
203 animation-delay: 0.2s;
204 animation-fill-mode: forwards;
205 }
206 &__return-home {
207 display: block;
208 float: left;
209 width: 110px;
210 height: 36px;
211 background: #1482f0;
212 border-radius: 100px;
213 text-align: center;
214 color: #ffffff;
215 opacity: 0;
216 font-size: 14px;
217 line-height: 36px;
218 cursor: pointer;
219 animation-name: slideUp;
220 animation-duration: 0.5s;
221 animation-delay: 0.3s;
222 animation-fill-mode: forwards;
223 }
224 @keyframes slideUp {
225 0% {
226 transform: translateY(60px);
227 opacity: 0;
228 }
229 100% {
230 transform: translateY(0);
231 opacity: 1;
232 }
233 }
234 }
235 }
236 </style>