chore: optimize exception page; :star2:

iczer

2020-07-10 1f26734a13dfa52151d8967f6a4956b043ab73af

chore: optimize exception page; :star2:

 package.json

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

 src/components/exception/ExceptionPage.vue

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


 src/pages/exception/403.vue

@@ -1,16 +1,24 @@
<template>
  <exception-page type="403" />
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="403" />
</template>

<script>
import ExceptionPage from '../../components/exception/ExceptionPage'
import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
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>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>

 src/pages/exception/404.vue

@@ -1,16 +1,24 @@
<template>
  <exception-page type="404" />
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="404" />
</template>

<script>
import ExceptionPage from '../../components/exception/ExceptionPage'
import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
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>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>

 src/pages/exception/500.vue

@@ -1,16 +1,24 @@
<template>
  <exception-page type="500" />
  <exception-page :style="`margin-top: ${marginTop}px; min-height: ${minHeight}px`" type="500" />
</template>

<script>
import ExceptionPage from '../../components/exception/ExceptionPage'
import ExceptionPage from '@/components/exception/ExceptionPage'
import {mapState} from 'vuex'
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>

<style scoped lang="less">
  .exception-page{
    margin: -24px 0 0;
  }
</style>