字词卡片拼音去掉空格后居中显示

src/views/wordcard/printNew.vue

@@ -54,9 +54,19 @@
                 v-if="data.right.audio_file"
                 :style="{ background: data.borderColor }"
               />
+              <p
+                :style="{ color: data.borderColor }"
+                v-if="data.right.pinyin && data.right.pinyin.split(' ').length === 1"
+                class="pinyin-box"
+              >
+                {{ data.right.pinyin }}
+              </p>
               <div class="hz-box">
                 <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
-                  <p :style="{ color: data.borderColor }">
+                  <p
+                    :style="{ color: data.borderColor }"
+                    v-if="data.right.pinyin && data.right.pinyin.split(' ').length > 1"
+                  >
                     {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
                   </p>
                   <Strockplay
@@ -434,6 +444,15 @@ export default {
       padding: 0 72px;
       display: block;
       margin-top: -30px;
+      .pinyin-box {
+        color: #de4444;
+        font-feature-settings: 'cv01' on;
+        font-family: League;
+        font-size: 24px;
+        line-height: 120%;
+        margin-bottom: 8px;
+        text-align: center;
+      }
       .hz-box {
         justify-content: center;
         width: 100%;

src/views/wordcard/writeTableNew.vue

@@ -128,9 +128,19 @@
                 :file-id="data.right.audio_file"
                 v-if="data.right.audio_file"
               />
+              <p
+                :style="{ color: data.borderColor }"
+                v-if="data.right.pinyin && data.right.pinyin.split(' ').length === 1"
+                class="pinyin-box"
+              >
+                {{ data.right.pinyin }}
+              </p>
               <div class="hz-box">
                 <div class="hz-item" v-for="(itemh, indexh) in data.right.hz_info" :key="indexh">
-                  <p :style="{ color: data.borderColor }">
+                  <p
+                    :style="{ color: data.borderColor }"
+                    v-if="data.right.pinyin && data.right.pinyin.split(' ').length > 1"
+                  >
                     {{ data.right.pinyin.split(' ')[indexh] ? data.right.pinyin.split(' ')[indexh] : '' }}
                   </p>
                   <Strockplay
@@ -570,6 +580,15 @@ export default {
     .right-preview {
       padding: 36px 72px;
       display: block;
+      .pinyin-box {
+        color: #de4444;
+        font-feature-settings: 'cv01' on;
+        font-family: League;
+        font-size: 24px;
+        line-height: 120%;
+        margin-bottom: 8px;
+        text-align: center;
+      }
       .hz-box {
         width: 100%;
         .hz-item {