预览页面标题显示完整

src/components/Adult/Preview.vue

@@ -12,6 +12,7 @@
       <div
         class="NNPE-title-bg"
         :style="{ background: themeColorPhone[themeColorPhoneIndex] }"
+        ref="titleBg"
       >
         <div class="NNPE-title NNPE-title-top">
           <!-- 页眉 -->
@@ -192,13 +193,13 @@
             class="btn-prev"
             :class="[preClick ? '' : 'btn-prev-disabled']"
             @click="handleNNPEprev"
-            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
+            :style="{ top: divHeight + 5 + (baseSizePhone - 14) + 'px' }"
           />
           <a
             class="btn-next"
             :class="[nextClick ? '' : 'btn-next-disabled']"
             @click="handleNNPEnext"
-            :style="{ top: 71 + (baseSizePhone - 14) + 'px' }"
+            :style="{ top: divHeight + 5 + (baseSizePhone - 14) + 'px' }"
           />
         </div>
         <div
@@ -206,6 +207,7 @@
             cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
           "
           class="classTopic-box"
+          :style="{ top: divHeight + 'px' }"
         >
           <span
             v-for="(item, index) in cur.classTopic"
@@ -2646,7 +2648,8 @@ export default {
         : 2, // 移动端主题色索引
       themeColorPhoneFlag: false,
       titleWidth: window.innerWidth - 60 + "px",
-      enterPage: this.$route.query.enterPage
+      enterPage: this.$route.query.enterPage,
+      divHeight: 0 // 计算移动端title-bg的高度
     };
   },
   computed: {
@@ -3036,6 +3039,13 @@ export default {
             ) || hasSentenceInput;
         });
       }
+
+      if (this.isPhone) {
+        this.$nextTick(() => {
+          const divHeight = this.$refs.titleBg.offsetHeight;
+          this.divHeight = divHeight;
+        });
+      }
       this.$forceUpdate();
     },
     // 词和标点合一起
@@ -3307,7 +3317,7 @@ export default {
     border-radius: 0px 0px 16px 16px;
     padding: 1px 30px;
     position: relative;
-    height: 64px;
+    min-height: 64px;
     display: flex;
     align-items: center;
     &.NNPE-title-gray {
@@ -3355,6 +3365,7 @@ export default {
       line-height: 18px;
       align-items: center;
       overflow: hidden;
+      flex-flow: wrap;
       .NNPE-title-item {
         margin-right: 12px;
         width: max-content;
@@ -3620,7 +3631,7 @@ export default {
     }
     .NNPE-title-bg {
       padding-bottom: 2px;
-      height: 66px;
+      min-height: 66px;
       position: fixed;
       top: 0;
       left: 0;