Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
b2b51c7b by 任超
Options

项目开始

1 parent 9d1d1cee
Inline Side-by-side
Showing 7 changed files with 356 additions and 12 deletions
1 <template> 1 <template>
2 <div :class="{'has-logo':showLogo}"> 2 <div :class="{ 'has-logo': showLogo }">
3 <logo v-if="showLogo" :collapse="isCollapse" /> 3 <logo v-if="showLogo" :collapse="isCollapse" />
4 <el-scrollbar wrap-class="scrollbar-wrapper"> 4 <el-scrollbar wrap-class="scrollbar-wrapper">
5 <el-menu :default-active="activeMenu" :collapse="isCollapse" 5 <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg"
6 :background-color="variables.menuBg" :text-color="variables.menuText" :unique-opened="true" 6 :text-color="variables.menuText" :unique-opened="true" :active-text-color="variables.menuActiveText"
7 :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> 7 :collapse-transition="false" mode="vertical">
8 <!-- 权限菜单 --> 8 <!-- 权限菜单 -->
9 <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> 9 <!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
10 <!-- 菜单全部展示 --> 10 <!-- 菜单全部展示 -->
11 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" 11 <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
12 :base-path="route.path" /> -->
13 </el-menu> 12 </el-menu>
14 </el-scrollbar> 13 </el-scrollbar>
15 </div> 14 </div>
...@@ -25,7 +24,7 @@ export default { ...@@ -25,7 +24,7 @@ export default {
25 components: { SidebarItem, Logo }, 24 components: { SidebarItem, Logo },
26 computed: { 25 computed: {
27 ...mapGetters(['permission_routes', 'sidebar']), 26 ...mapGetters(['permission_routes', 'sidebar']),
28 activeMenu() { 27 activeMenu () {
29 const route = this.$route 28 const route = this.$route
30 const { meta, path } = route 29 const { meta, path } = route
31 // if set path, the sidebar will highlight the path you set 30 // if set path, the sidebar will highlight the path you set
...@@ -34,16 +33,16 @@ export default { ...@@ -34,16 +33,16 @@ export default {
34 } 33 }
35 return path 34 return path
36 }, 35 },
37 showLogo() { 36 showLogo () {
38 return this.$store.state.settings.sidebarLogo 37 return this.$store.state.settings.sidebarLogo
39 }, 38 },
40 variables() { 39 variables () {
41 return variables 40 return variables
42 }, 41 },
43 isCollapse() { 42 isCollapse () {
44 return !this.sidebar.opened 43 return !this.sidebar.opened
45 }, 44 },
46 asyncRoutes() { 45 asyncRoutes () {
47 return asyncRoutes 46 return asyncRoutes
48 }, 47 },
49 }, 48 },
......
...@@ -21,6 +21,16 @@ export const constantRoutes = [ ...@@ -21,6 +21,16 @@ export const constantRoutes = [
21 ] 21 ]
22 }, 22 },
23 { 23 {
24 path: '/404',
25 component: () => import('@/views/error-page/404'),
26 hidden: true
27 },
28 {
29 path: '/401',
30 component: () => import('@/views/error-page/401'),
31 hidden: true
32 },
33 {
24 path: '/', 34 path: '/',
25 component: Layout, 35 component: Layout,
26 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>