生字模板调整拼音和英文位置

src/components/Adult/Preview.vue

@@ -1078,7 +1078,7 @@ export default {
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log("2023-03-03");
+    console.log("2023-08-13");
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {

src/components/Adult/preview/NewWordShow.vue

@@ -4,11 +4,10 @@
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
       <div class="item-pre" v-for="(item, index) in curQue.option" :key="index">
+        <template v-if="item.pinyin">
+            <span class="pinyin" :style="{width:pinyinWidth+'px'}">{{ item.pinyin }}</span>
+        </template> 
         <div class="item" style="margin-right: 20px">
-          <p v-if="item.pinyin || item.en">
-            <span>{{ item.pinyin }}</span>
-            <span>{{ item.en }}</span>
-          </p>
           <div class="con-box">
             <template v-if="item.imgOrText == 'text'">
               <template v-if="item.con">
@@ -52,7 +51,7 @@
               </div>
             </template>
           </div>
-        </div>
+          
         <template v-if="item.type && item.type.indexOf('lm') > -1">
           <div
             class="con-box"
@@ -90,6 +89,8 @@
             </div>
           </div>
         </template>
+        </div>
+        <span v-if="item.en" class="en" :style="{marginLeft:item.en.length<12?'':enMargin+'px',textAlign:item.en.length<12?'center':'left',width:item.en.length<12?pinyinWidth+'px':''}">{{ item.en }}</span>
       </div>
     </div>
     <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
@@ -141,6 +142,8 @@ export default {
       userAnswer: {
         writeModel: {}, //生词/取词模式
       },
+      pinyinWidth: 91,
+      enMargin: 13
     };
   },
   computed: {},
@@ -175,7 +178,6 @@ export default {
           ref.draw(null, history[i][0], history[i][1]);
           requestAnimationFrame(runner);
         } else {
-          console.log("播放完成");
           this.playStatus = false;
         }
       };
@@ -236,7 +238,10 @@ export default {
         //   arr = [null, null, null, null, null, null, null];
         }
         item.imgarr = arr;
+        this.pinyinWidth = Number(730/(this.curQue.numberList.con*1+1))
+        this.enMargin = (Number(730/(this.curQue.numberList.con*1+1))-64)/2
       });
+
     },
     changePraShow() {
       this.isPraShow = false;
@@ -354,15 +359,27 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     .item-pre {
-      display: flex;
-      flex-flow: wrap;
-      align-items: flex-end;
       padding: 9px 20px;
     }
+    .pinyin{
+        text-align: center;
+        display: block;
+        margin-bottom: 4px;
+        font-family: Sans-GBNPC;
+        color: #000;
+    }
+    .en{
+        display: block;
+        margin-top: 4px;
+        font-family: robot;
+    }
     .item {
       box-sizing: border-box;
       // width: 66px;
       cursor: pointer;
+      display: flex;
+      flex-flow: wrap;
+      align-items: flex-end;
       > p {
         white-space: nowrap;
         :nth-child(1) {