From 1f26734a13dfa52151d8967f6a4956b043ab73af Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Fri, 10 Jul 2020 17:56:54 +0800
Subject: [PATCH] chore: optimize exception page; :star2:

---
 package.json                               |  2 +-
 src/components/exception/ExceptionPage.vue |  5 ++---
 src/pages/exception/403.vue                | 20 ++++++++++++++------
 src/pages/exception/404.vue                | 20 ++++++++++++++------
 src/pages/exception/500.vue                | 20 ++++++++++++++------
 5 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 372cf87..6b793dc 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/exception/ExceptionPage.vue b/src/components/exception/ExceptionPage.vue
index 656acaa..5c5316b 100644
--- a/src/components/exception/ExceptionPage.vue
+++ b/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>
 
diff --git a/src/pages/exception/403.vue b/src/pages/exception/403.vue
index f35faf5..573b1f8 100644
--- a/src/pages/exception/403.vue
+++ b/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>
diff --git a/src/pages/exception/404.vue b/src/pages/exception/404.vue
index 05fda1c..3670281 100644
--- a/src/pages/exception/404.vue
+++ b/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>
diff --git a/src/pages/exception/500.vue b/src/pages/exception/500.vue
index f68d91a..cbfc554 100644
--- a/src/pages/exception/500.vue
+++ b/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>