笔记文章留白问题

 <template>
   <div ref="intro" class="intro-wrap" :class="introClass" :style="introStyle" @click="onExpanding">
-    <div class="context-title">{{this.data.articleTitle}}</div>
     <div v-if="trimIntro" class="intro-content">
       <p class="pre-wrap" @click="toUserPage" v-html="introDecorator"></p>
       <div ref="introPool" class="intro-pool pre-wrap" v-if="!introHeight" v-html="trimIntroDecorator" >
@@ -206,16 +205,6 @@ export default {
     overflow: hidden;
     transition: height 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
 
-    .context-title {
-      font-size: 36px;
-      color: #222;
-      line-height: 56px;
-      margin-top: 10px;
-      margin-bottom: 16px;
-      letter-spacing: 0.68px;
-      font-weight: bolder;
-    }
-
     .intro-content {
       line-height: 1.7;
       font-size: 32px;

@@ -11,6 +11,8 @@
       <ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
       <ProductGroup name="articleTwoColumn" :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
 
+      <div class="context-title">{{data.articleTitle}}</div>
+
       <ArticleDetailIntro :data="introData" :pos-id="posId"></ArticleDetailIntro>
       <ArticleItemTopics :data="topicsData" :share="share"></ArticleItemTopics>
 
@@ -168,6 +170,17 @@ export default {
   align-items: center;
 }
 
+.context-title {
+  font-size: 36px;
+  color: #222;
+  line-height: 56px;
+  margin-top: 10px;
+  margin-bottom: 16px;
+  letter-spacing: 0.68px;
+  font-weight: bolder;
+  padding: 0 30px;
+}
+
 .publish-time {
   font-size: 24px;
   color: #b0b0b0;