字词卡片拼音对齐问题

src/views/book/courseware/preview/components/article/index.vue

@@ -252,6 +252,7 @@ export default {
   },
   mixins: [PreviewMixin],
   inject: ['bookInfo'],
+  props: ['isMobile'],
   data() {
     return {
       data: getArticleData(),

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -571,7 +571,7 @@
                         </template>
 
                         <p
-                          v-if="item.pinyin && item.pinyin.split(' ').length === 1"
+                          v-if="item.pinyin && !item.pyhz"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.topic_color
@@ -585,7 +585,7 @@
                         <div class="hz-box">
                           <div v-for="(itemh, indexh) in item.hz_info" :key="indexh" class="hz-item">
                             <p
-                              v-if="item.pinyin && item.pinyin.split(' ').length > 1"
+                              v-if="item.pinyin && item.pyhz"
                               :style="{
                                 color:
                                   data.unified_attrib && data.unified_attrib.topic_color
@@ -593,7 +593,7 @@
                                     : '',
                               }"
                             >
-                              {{ item.pinyin.split(' ')[indexh] ? item.pinyin.split(' ')[indexh] : '' }}
+                              {{ item.pinyin.split(' ')[indexh] ? item.pinyin.split(' ')[indexh] : '&nbsp;' }}
                             </p>
                             <Strockplay
                               class-name="adult-strockplay"
@@ -739,7 +739,6 @@ import writeTableZoom from './components/writeTableZoom.vue';
 
 export default {
   name: 'NewWordPreview',
-
   components: {
     SoundRecord,
     AudioLine,
@@ -754,6 +753,10 @@ export default {
       type: Object,
       default: null,
     },
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -960,9 +963,15 @@ export default {
         //     this.$set(item, 'pic_url', url_map[item.file_list[0]]);
         //   });
         // }
+        let flag = false;
+        if (item.pinyin) {
+          flag = item.pinyin.split(' ').length === item.new_word.length;
+        }
         this.$set(item, 'show_left', true);
         this.$set(item, 'isFlipped', false);
+        this.$set(item, 'pyhz', flag);
       });
+      console.log(this.data.new_word_list);
       option_list.forEach((item, index) => {
         optionRes = optionRes.concat(item);
         Bookanswer.push([]);
@@ -1568,7 +1577,7 @@ export default {
           }
 
           p {
-            margin: 0;
+            margin: 0 0 8px;
             font-family: 'League';
             font-size: 14px;
             font-feature-settings: 'cv01' on;

src/views/book/courseware/preview/components/new_word/components/writeTableZoom.vue

@@ -105,7 +105,7 @@
               </div>
             </template>
             <p
-              v-if="data.pinyin && data.pinyin.split(' ').length === 1"
+              v-if="data.pinyin && !data.pyhz"
               :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
               class="pinyin-box"
             >
@@ -114,10 +114,10 @@
             <div class="hz-box">
               <div v-for="(itemh, indexh) in data.hz_info" :key="indexh" class="hz-item">
                 <p
-                  v-if="data.pinyin && data.pinyin.split(' ').length > 1"
+                  v-if="data.pinyin && data.pyhz"
                   :style="{ color: attrib && attrib.topic_color ? attrib.topic_color : '' }"
                 >
-                  {{ data.pinyin.split(' ')[indexh] ? data.pinyin.split(' ')[indexh] : '' }}
+                  {{ data.pinyin.split(' ')[indexh] ? data.pinyin.split(' ')[indexh] : '&nbsp;' }}
                 </p>
                 <Strockplay
                   class-name="adult-strockplay"
@@ -515,7 +515,7 @@ export default {
       padding: 36px;
 
       .pinyin-box {
-        margin-bottom: 8px;
+        margin-bottom: 12px;
         font-family: 'League';
         font-size: 22px;
         font-feature-settings: 'cv01' on;