From 6a5197ad51ab84133fbd2afd40de636a2f7449cb Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 10 Jul 2018 13:22:16 +0800
Subject: [PATCH] perf[css]: refine style

---
 src/views/errorPage/404.vue             | 33 +++++++++++--------------
 src/views/layout/components/AppMain.vue | 10 +++-----
 2 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index 55ade60b..dccf5736 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -1,28 +1,25 @@
 <template>
-  <div style="background:#f0f2f5;height:100%;">
-    <div class="wscn-http404-container">
-      <div class="wscn-http404">
-        <div class="pic-404">
-          <img class="pic-404__parent" :src="img_404" alt="404">
-          <img class="pic-404__child left" :src="img_404_cloud" alt="404">
-          <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
-          <img class="pic-404__child right" :src="img_404_cloud" alt="404">
-        </div>
-        <div class="bullshit">
-          <div class="bullshit__oops">OOPS!</div>
-          <div class="bullshit__info">版权所有
-            <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
-          </div>
-          <div class="bullshit__headline">{{ message }}</div>
-          <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
-          <a href="" class="bullshit__return-home">返回首页</a>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">版权所有
+          <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
         </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
+        <a href="" class="bullshit__return-home">返回首页</a>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 import img_404 from '@/assets/404_images/404.png'
 import img_404_cloud from '@/assets/404_images/404_cloud.png'
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index ea1217d7..584e3723 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -24,12 +24,10 @@ export default {
 
 <style scoped>
 .app-main {
-  position: absolute;
-  top: 84px; /* navbar + tags-view = 50 +34 */
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
+  /*84 = navbar + tags-view = 50 +34 */
+  min-height: calc(100vh - 84px);
+  position: relative;
+  overflow: hidden;
 }
 </style>