chore: optimize exception page; 🌟

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 @@ export default {
     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>