生词模式增加上下篇切换按钮

src/views/bookShelf/articleDetail.vue

@@ -86,6 +86,7 @@
             @changeLike="changeLike"
             :likeSentencelist="likeSentencelist"
             :articleImg="articleImg"
+            @handlePage="handlePage"
           ></phrase-model>
           <practice-model
             :titleFontsize="48"

src/views/bookShelf/bookPeruseItem.vue

@@ -540,7 +540,7 @@ export default {
               color: #c2c2c2;
               font-weight: 400;
               margin-right: 16px;
-              width: 58px;
+              width: 84px;
               display: block;
               text-align: justify;
               text-justify: distribute-all-lines;

src/views/bookShelf/components/PhraseModel.vue

@@ -99,27 +99,62 @@
         >{{ articleInfo.art_title }}</span
       >
     </h2>
+    <div class="info-box">
+      <el-button
+        type="text"
+        class="btn-left"
+        :class="[activeArticleIndex === 0 ? 'not-allow' : '']"
+        @click="handlePage('-')"
+        :style="{ color: colorObj.btnColor }"
+        ><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button
+      >
+      <h6
+        class="nnpe-article-author"
+        :style="{
+          color: colorObj.sourceColor,
+          fontSize: '14px',
+          lineHeight: '22px',
+          fontWeight: '400',
+          margin: 0,
+        }"
+      >
+        {{
+          articleInfo.study_phase_name +
+          "版 · 第 " +
+          articleInfo.iss_no +
+          " 期 · " +
+          articleInfo.release_date +
+          " · " +
+          articleInfo.chn_item +
+          (articleInfo.page_no_in_pub
+            ? " · P" + articleInfo.page_no_in_pub
+            : "")
+        }}
+      </h6>
+      <el-button
+        type="text"
+        class="btn-right"
+        :class="[
+          activeArticleIndex === activeArticleIndexLen - 1 ? 'not-allow' : '',
+        ]"
+        @click="handlePage('+')"
+        :style="{ color: colorObj.btnColor }"
+        >下一篇<svg-icon icon-class="arrow-right-line"></svg-icon
+      ></el-button>
+    </div>
+    <el-divider></el-divider>
     <h6
       class="nnpe-article-author"
       :style="{
         color: colorObj.sourceColor,
-        fontSize: '14px',
-        lineHeight: '22px',
+        fontSize: '16px',
+        lineHeight: '24px',
         fontWeight: '400',
+        margin: articleInfo.art_sound_url ? '0 0 24px 0' : '0',
+        textAlign: 'center',
       }"
     >
-      {{
-        articleInfo.art_author +
-        " · " +
-        articleInfo.study_phase_name +
-        "版 · 第 " +
-        articleInfo.iss_no +
-        " 期 · " +
-        articleInfo.release_date +
-        " · " +
-        articleInfo.chn_item +
-        (articleInfo.page_no_in_pub ? " · P" + articleInfo.page_no_in_pub : "")
-      }}
+      {{ articleInfo.art_author }}
     </h6>
     <div class="audio-box">
       <div
@@ -441,6 +476,9 @@ export default {
   },
   //方法集合
   methods: {
+    handlePage(type) {
+      this.$emit("handlePage", type);
+    },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
@@ -743,6 +781,30 @@ export default {
       }
     }
   }
+  .info-box {
+    display: flex;
+    justify-content: space-between;
+  }
+  .btn-left,
+  .btn-right {
+    color: #3459d2;
+    font-size: 16px;
+    line-height: 24px;
+    padding: 0;
+    .svg-icon {
+      margin-right: 12px;
+    }
+    &.not-allow {
+      color: #5e89ef;
+      cursor: not-allowed;
+    }
+  }
+  .btn-right {
+    .svg-icon {
+      margin-right: 0;
+      margin-left: 12px;
+    }
+  }
   .table-box {
     // background: #f7f7f7;
     // border-top: 1px solid rgba(0, 0, 0, 0.1);