long

@@ -8,6 +8,7 @@
         </div>
       </div>
     </ArticleDetailHeader>
+    <div class="header-cover"></div>
     <ArticleItemSlideImage ref="coverFigure" :data="coverImage" :thumb-size="coverSize" :style="`transform: translate3d(0, ${coverTranslateY}px, 0)`">
     </ArticleItemSlideImage>
     <div ref="authorBlock" class="author-block">
@@ -148,6 +149,9 @@ export default {
 
         return step;
       } else {
+        this.SET_STATUS_BAR_COLOR({
+          color: 'white'
+        });
         return 0;
       }
     },
@@ -242,6 +246,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.header-cover {
+  width: 100%;
+  height: 400px;
+  position: absolute;
+  top: 0;
+  overflow: hidden;
+
+  &:before {
+    content: "";
+    height: 1px;
+    position: absolute;
+    top: -1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    box-shadow: 0 0 160px 10px #000;
+  }
+}
+
 .title-main {
   height: 100%;
   color: #444;
@@ -284,7 +307,7 @@ export default {
 .author-block,
 .main-detail {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   background-color: #fff;
 }
 
@@ -328,6 +351,7 @@ export default {
 
   img {
     max-width: 100%!important;
+    height: auto;
   }
 
   p {