JLNTV_IPD/vue-antd-admin
Template
4
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin.git synced 2025-04-06 03:57:44 +08:00
Code Issues Projects Releases Wiki Activity

chore: optimize exception page; 🌟

Browse Source
This commit is contained in:
iczer 2020-07-10 17:56:54 +08:00
parent 839ba55fe1
commit 1f26734a13
5 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-antd-admin", "name": "vue-antd-admin",
"version": "0.1.0", "version": "0.2.1",
"homepage": "https://iczer.github.io/vue-antd-admin", "homepage": "https://iczer.github.io/vue-antd-admin",
"private": true, "private": true,
"scripts": { "scripts": {

5
src/components/exception/ExceptionPage.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="exception-page" :style="{height: layoutMinHeight - 32 + 'px'}"> <div class="exception-page">
<div class="img"> <div class="img">
<img :src="config[type].img" /> <img :src="config[type].img" />
</div> </div>
@ -23,8 +23,7 @@ export default {
return { return {
config: Config config: Config
} }
}, }
inject: ['layoutMinHeight']
} }
</script> </script>

20
src/pages/exception/403.vue
View File

@ -1,16 +1,24 @@
<template> <template>
<exception-page type="403" /> <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="403" />
</template> </template>
<script> <script>
import ExceptionPage from '../../components/exception/ExceptionPage' import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
export default { export default {
components: {ExceptionPage} components: {ExceptionPage},
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
}
}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.exception-page{
margin: -24px 0 0;
}
</style> </style>

20
src/pages/exception/404.vue
View File

@ -1,16 +1,24 @@
<template> <template>
<exception-page type="404" /> <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="404" />
</template> </template>
<script> <script>
import ExceptionPage from '../../components/exception/ExceptionPage' import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
export default { export default {
components: {ExceptionPage} components: {ExceptionPage},
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
}
}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.exception-page{
margin: -24px 0 0;
}
</style> </style>

20
src/pages/exception/500.vue
View File

@ -1,16 +1,24 @@
<template> <template>
<exception-page type="500" /> <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="500" />
</template> </template>
<script> <script>
import ExceptionPage from '../../components/exception/ExceptionPage' import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
export default { export default {
components: {ExceptionPage} components: {ExceptionPage},
inject: ['layoutMinHeight'],
computed: {
...mapState('setting', ['multiPage']),
marginTop() {
return this.multiPage ? -24 : 0
},
minHeight() {
return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
}
}
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.exception-page{
margin: -24px 0 0;
}
</style> </style>