commit

@@ -28,7 +28,7 @@ export default {
     transfer: Boolean,
     zIndex: {
       type: Number,
-      default: 5
+      default: 100
     },
     visible: {
       type: Boolean,
@@ -109,7 +109,7 @@ export default {
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: 5;
+    z-index: 100;
 
     .yoho-popup-mask {
       display: block;

 <template>
   <div class="comment-list">
-    <div class="comment-content">
-      <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">
-        <CommentItem
-          v-for="(comment, index) in commentList"
-          :key="index"
-          :parent-comment="comment.parentComment"
-          :children-comments="comment.childrenComments"
-          :column-type="columnType"
-          @on-reply="onReply">
-        </CommentItem>
-      </Scroll>
+    <div class="comment-content-flex">
+      <div class="comment-content">
+        <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">
+          <CommentItem
+            v-for="(comment, index) in commentList"
+            :key="index"
+            :parent-comment="comment.parentComment"
+            :children-comments="comment.childrenComments"
+            :column-type="columnType"
+            @on-reply="onReply">
+          </CommentItem>
+        </Scroll>
+      </div>
     </div>
     <div class="comment-footer">
       <CommentPlaceholder
@@ -149,16 +151,25 @@ export default {
   display: flex;
   flex-direction: column;
 
-  .comment-content {
+  .comment-content-flex {
     flex: 1;
-    padding-top: 40px;
-    padding-left: 30px;
-    padding-right: 30px;
     overflow: hidden;
+    position: relative;
 
     /deep/ .before-trigger {
       color: #b0b0b0;
     }
+
+    .comment-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding-top: 40px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
   }
 
   .comment-footer {

 <template>
   <div class="layout" :class="{'header-fixed': headerFixed}">
     <slot name="header" v-if="hasHeader"></slot>
-    <div class="layout-content">
-      <slot></slot>
+    <div class="layout-content-flex">
+      <div class="layout-content">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -64,12 +66,21 @@ export default {
     }
   }
 
-  .layout-content {
+  .layout-content-flex {
     width: 100%;
     height: 100%;
     flex: 1;
+    position: relative;
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
+
+    .layout-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 }
 </style>