课文增加字体配置

src/components/Adult/common/NewordPhraseModule.vue

@@ -18,19 +18,19 @@
             >删除</el-button
           >
           <el-button
-                type="primary"
-                size="small"
-                icon="el-icon-top"
-                @click="moveElement(curQueItem, 'up')"
-                >上移</el-button
-            >
-            <el-button
-                type="primary"
-                size="small"
-                icon="el-icon-bottom"
-                @click="moveElement(curQueItem, 'down')"
-                >下移</el-button
-            >
+            type="primary"
+            size="small"
+            icon="el-icon-top"
+            @click="moveElement(curQueItem, 'up')"
+            >上移</el-button
+          >
+          <el-button
+            type="primary"
+            size="small"
+            icon="el-icon-bottom"
+            @click="moveElement(curQueItem, 'down')"
+            >下移</el-button
+          >
         </div>
         <div class="adult-book-input-item">
           <span class="adult-book-lable">星号标识：</span>
@@ -43,8 +43,8 @@
           class="adult-book-input-item"
           v-if="
             curQue.wordTime &&
-            curQue.wordTime.length > 0 &&
-            curQue.wordTime[curQueItem.index]
+              curQue.wordTime.length > 0 &&
+              curQue.wordTime[curQueItem.index]
           "
         >
           <span class="adult-book-lable">字幕时间：</span>
@@ -180,14 +180,14 @@
           </div>
         </div>
         <div class="addoption" @click="AddLiju">添加例句</div>
-        <div class="adult-book-input-item">
+        <!-- <div class="adult-book-input-item">
           <Upload
             :changeFillId="changeMp3"
             :datafileList="fileCon.mp3_list"
             :filleNumber="mp3Number"
             :uploadType="'mp3'"
           />
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -200,16 +200,24 @@ import "@/utils/pinyinUtil";
 
 export default {
   components: {
-    Upload,
+    Upload
   },
-  props: ["curQue", "curQueItem", "index", "sIndex", "type", "deleteGroup", "moveElement2"],
+  props: [
+    "curQue",
+    "curQueItem",
+    "index",
+    "sIndex",
+    "type",
+    "deleteGroup",
+    "moveElement2"
+  ],
   data() {
     return {
       mp3Number: 1,
       fileCon: {
         img_list: [],
-        mp3_list: [],
-      },
+        mp3_list: []
+      }
     };
   },
   computed: {},
@@ -274,7 +282,7 @@ export default {
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
-      articleImgList.forEach((item) => {
+      articleImgList.forEach(item => {
         if (item.response) {
           const obj = {
             name: item.name,
@@ -283,7 +291,7 @@ export default {
 
             media_duration: item.response.file_info_list[0].media_duration,
             file_relative_path:
-              item.response.file_info_list[0].file_relative_path,
+              item.response.file_info_list[0].file_relative_path
           };
           articleImgRes.push(obj);
         }
@@ -295,8 +303,8 @@ export default {
       this.deleteGroup(this.index, this.sIndex);
     },
     moveElement(dItem, type) {
-      this.moveElement2(dItem, type, this.index, this.sIndex)
-    },
+      this.moveElement2(dItem, type, this.index, this.sIndex);
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -313,10 +321,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .Big-Book-input {
   .Big-Book-content {
@@ -380,4 +388,4 @@ export default {
     margin-top: 20px;
   }
 }
-</style>
+</style>

src/components/Adult/inputModules/ArticleTemChs/components/SegbywordChs.vue

@@ -76,7 +76,7 @@
             maxlength="500"
             show-word-limit
             @input="$forceUpdate()"
-            @blur="onBlur(paraCon.sentencesEn,sentIndex)"
+            @blur="onBlur(paraCon.sentencesEn, sentIndex)"
           ></el-input>
         </div>
         <div class="NPC-words-box">
@@ -109,8 +109,8 @@
                 border
                 style="width: 75%"
               >
-                <el-table-column prop="chs" label="词" width="180">
-                    <template slot-scope="scope">
+                <el-table-column prop="chs" label="词" width="120">
+                  <template slot-scope="scope">
                     <el-input
                       v-model="scope.row.chs"
                       placeholder="请输入内容"
@@ -120,7 +120,7 @@
                     ></el-input>
                   </template>
                 </el-table-column>
-                <el-table-column label="拼音" width="220">
+                <el-table-column label="拼音" width="180">
                   <template slot-scope="scope">
                     <el-input
                       v-model="scope.row.pinyin"
@@ -132,25 +132,37 @@
                   </template>
                 </el-table-column>
                 <el-table-column label="配置">
-                    <template slot-scope="scope">
-                        <!-- <div class="adult-book-input-item">
+                  <template slot-scope="scope">
+                    <!-- <div class="adult-book-input-item">
                             <span class="adult-book-lable">禁止高亮:</span>
                             <el-radio-group v-model="scope.row.banLight">
                             <el-radio :label="false">允许</el-radio>
                             <el-radio :label="true">禁止</el-radio>
                             </el-radio-group>
                         </div> -->
-                        <div class="adult-book-input-item">
-                            <span class="adult-book-lable">高亮生词:</span>
-                            <el-input
-                                placeholder="请输入生词"
-                                v-model="scope.row.new_word"
-                                @input="handleInput"
-                                @blur="onBlur(scope.row, 'new_word')"
-                                class="adult-book-input"
-                            ></el-input>
-                        </div>
-                    </template>
+                    <div class="adult-book-input-item">
+                      <span class="adult-book-lable">字体:</span>
+                      <el-radio-group v-model="scope.row.fontFamily">
+                        <el-radio
+                          v-for="(item, index) in fontFamilyList"
+                          :key="'fontFamilyList' + index"
+                          :label="item.value"
+                        >
+                          <span>{{ item.name }}</span>
+                        </el-radio>
+                      </el-radio-group>
+                    </div>
+                    <div class="adult-book-input-item">
+                      <span class="adult-book-lable">高亮生词:</span>
+                      <el-input
+                        placeholder="请输入生词"
+                        v-model="scope.row.new_word"
+                        @input="handleInput"
+                        @blur="onBlur(scope.row, 'new_word')"
+                        class="adult-book-input"
+                      ></el-input>
+                    </div>
+                  </template>
                 </el-table-column>
               </el-table>
               <div></div>
@@ -182,7 +194,6 @@
     </el-dialog>
   </div>
 </template>
-              
 
 <script>
 import { createPinyin } from "@/api/ajax";
@@ -209,21 +220,40 @@ export default {
         ["Ō", "Ó", "Ô", "Ò"],
         ["Ē", "É", "Ê", "È"],
         ["Ī", "Í", "Î", "Ì"],
-        ["Ū", "Ú", "Û", "Ù"],
+        ["Ū", "Ú", "Û", "Ù"]
       ],
       wordsListLeg: 0,
+      fontFamilyList: [
+        {
+          value: "FZJCGFKTK",
+          name: "中文"
+        },
+        {
+          value: "Sans-GBNPC",
+          name: "拼音"
+        },
+        {
+          value: "robot",
+          name: "英文"
+        },
+        {
+          value:
+            "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif",
+          name: "系统字体"
+        }
+      ]
     };
   },
   computed: {},
   watch: {
     segList: {
-      handler: function (newVal, oldVal) {
+      handler: function(newVal, oldVal) {
         if (newVal != oldVal) {
           this.getParaSegWordsResult();
         }
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   //方法集合
   methods: {
@@ -232,7 +262,7 @@ export default {
     },
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
-      this.$forceUpdate()
+      this.$forceUpdate();
     },
     onBlurIndex(index, field) {
       let res = this.paraCon[field][index].sent_str.trim();
@@ -255,7 +285,7 @@ export default {
         let sent_str = item.join(" ");
         let obj = {
           sent_str: sent_str,
-          isReadonly: false,
+          isReadonly: false
         };
         seg_words.push(obj);
       });
@@ -292,12 +322,12 @@ export default {
       let sentIndex = this.sentIndex;
       let sent_arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       let res_str = "";
-      sent_arr.forEach((item) => {
+      sent_arr.forEach(item => {
         if (item) {
           let bool = this.checkEn(item);
-        //   if (bool) {
-        //     res_str += item.trim() + " ";
-        //   } else 
+          //   if (bool) {
+          //     res_str += item.trim() + " ";
+          //   } else
           if (item == "(") {
             res_str += " " + item.trim() + " ";
           } else if (item == ")") {
@@ -309,17 +339,17 @@ export default {
       });
       res_str = res_str.replace(/\s+/g, " ");
       let org_sent = this.paraCon.sentences[sentIndex];
-    //   if (res_str.trim() != org_sent.trim()) {
-    //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
-    //     return;
-    //   }
+      //   if (res_str.trim() != org_sent.trim()) {
+      //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
+      //     return;
+      //   }
       let arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       this.$set(this.paraCon.segList, sentIndex, arr);
       let wordsList = [];
-      arr.forEach((sItem) => {
+      arr.forEach(sItem => {
         let obj = {
           chs: sItem,
-          pinyin: "",
+          pinyin: ""
         };
         wordsList.push(obj);
       });
@@ -330,12 +360,12 @@ export default {
       let sentIndex = this.sentIndex;
       let sent_arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       let res_str = "";
-      sent_arr.forEach((item) => {
+      sent_arr.forEach(item => {
         if (item) {
           let bool = this.checkEn(item);
-        //   if (bool) {
-        //     res_str += item.trim() + " ";
-        //   } else 
+          //   if (bool) {
+          //     res_str += item.trim() + " ";
+          //   } else
           if (item == "(") {
             res_str += " " + item.trim() + " ";
           } else if (item == ")") {
@@ -347,22 +377,22 @@ export default {
       });
       res_str = res_str.replace(/\s+/g, " ");
       let org_sent = this.paraCon.sentences[sentIndex];
-    //   if (res_str.trim() != org_sent.trim()) {
-    //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
-    //     return;
-    //   }
+      //   if (res_str.trim() != org_sent.trim()) {
+      //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
+      //     return;
+      //   }
       let textListList = [];
       let arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       this.$set(this.paraCon.segList, sentIndex, arr);
       let segArr = this.paraCon.segList[sentIndex];
-      segArr.forEach((item) => {
+      segArr.forEach(item => {
         let str = Base64.encode(item);
         textListList.push(str);
       });
       let data = {
-        textListList: [textListList],
+        textListList: [textListList]
       };
-      createPinyin(data).then((res) => {
+      createPinyin(data).then(res => {
         let wordsList = res.data.result[0];
         this.$set(this.paraCon.wordsList, sentIndex, wordsList);
       });
@@ -386,7 +416,7 @@ export default {
       document.execCommand("copy");
       this.$message({
         message: "复制成功",
-        type: "success",
+        type: "success"
       });
       window.getSelection().removeAllRanges();
     },
@@ -415,7 +445,7 @@ export default {
       this.sentIndex += 1;
       //this.paraCon = this.curQue.detail[this.sentIndex];
     },
-    beforeClose() {},
+    beforeClose() {}
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -429,10 +459,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .NPC-para-list {
   border: 1px #cccccc solid;
@@ -491,4 +521,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/Adult/inputModules/DialogueArticleChs/components/SegbywordChs.vue

@@ -107,9 +107,9 @@
                 border
                 style="width: 75%"
               >
-                <el-table-column prop="chs" label="词" width="180">
+                <el-table-column prop="chs" label="词" width="120">
                 </el-table-column>
-                <el-table-column label="拼音" width="220">
+                <el-table-column label="拼音" width="180">
                   <template slot-scope="scope">
                     <el-input
                       v-model="scope.row.pinyin"
@@ -121,25 +121,37 @@
                   </template>
                 </el-table-column>
                 <el-table-column label="配置">
-                    <template slot-scope="scope">
-                        <!-- <div class="adult-book-input-item">
+                  <template slot-scope="scope">
+                    <!-- <div class="adult-book-input-item">
                             <span class="adult-book-lable">禁止高亮:</span>
                             <el-radio-group v-model="scope.row.banLight">
                             <el-radio :label="false">允许</el-radio>
                             <el-radio :label="true">禁止</el-radio>
                             </el-radio-group>
                         </div> -->
-                        <div class="adult-book-input-item">
-                            <span class="adult-book-lable">高亮生词:</span>
-                            <el-input
-                                placeholder="请输入生词"
-                                v-model="scope.row.new_word"
-                                @input="handleInput"
-                                @blur="onBlur(scope.row, 'new_word')"
-                                class="adult-book-input"
-                            ></el-input>
-                        </div>
-                    </template>
+                    <div class="adult-book-input-item">
+                      <span class="adult-book-lable">字体:</span>
+                      <el-radio-group v-model="scope.row.fontFamily">
+                        <el-radio
+                          v-for="(item, index) in fontFamilyList"
+                          :key="'fontFamilyList' + index"
+                          :label="item.value"
+                        >
+                          <span>{{ item.name }}</span>
+                        </el-radio>
+                      </el-radio-group>
+                    </div>
+                    <div class="adult-book-input-item">
+                      <span class="adult-book-lable">高亮生词:</span>
+                      <el-input
+                        placeholder="请输入生词"
+                        v-model="scope.row.new_word"
+                        @input="handleInput"
+                        @blur="onBlur(scope.row, 'new_word')"
+                        class="adult-book-input"
+                      ></el-input>
+                    </div>
+                  </template>
                 </el-table-column>
               </el-table>
             </div>
@@ -170,7 +182,6 @@
     </el-dialog>
   </div>
 </template>
-              
 
 <script>
 import { createPinyin } from "@/api/ajax";
@@ -197,21 +208,40 @@ export default {
         ["Ō", "Ó", "Ô", "Ò"],
         ["Ē", "É", "Ê", "È"],
         ["Ī", "Í", "Î", "Ì"],
-        ["Ū", "Ú", "Û", "Ù"],
+        ["Ū", "Ú", "Û", "Ù"]
       ],
       wordsListLeg: 0,
+      fontFamilyList: [
+        {
+          value: "FZJCGFKTK",
+          name: "中文"
+        },
+        {
+          value: "Sans-GBNPC",
+          name: "拼音"
+        },
+        {
+          value: "robot",
+          name: "英文"
+        },
+        {
+          value:
+            "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif",
+          name: "系统字体"
+        }
+      ]
     };
   },
   computed: {},
   watch: {
     segList: {
-      handler: function (newVal, oldVal) {
+      handler: function(newVal, oldVal) {
         if (newVal != oldVal) {
           this.getParaSegWordsResult();
         }
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   //方法集合
   methods: {
@@ -241,7 +271,7 @@ export default {
         let sent_str = item.join(" ");
         let obj = {
           sent_str: sent_str,
-          isReadonly: false,
+          isReadonly: false
         };
         seg_words.push(obj);
       });
@@ -278,7 +308,7 @@ export default {
       let sentIndex = this.sentIndex;
       let sent_arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       let res_str = "";
-      sent_arr.forEach((item) => {
+      sent_arr.forEach(item => {
         if (item) {
           let bool = this.checkEn(item);
           if (bool) {
@@ -294,17 +324,17 @@ export default {
       });
       res_str = res_str.replace(/\s+/g, " ");
       let org_sent = this.paraCon.sentences[sentIndex];
-    //   if (res_str.trim() != org_sent.trim()) {
-    //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
-    //     return;
-    //   }
+      //   if (res_str.trim() != org_sent.trim()) {
+      //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
+      //     return;
+      //   }
       let arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       this.$set(this.paraCon.segList, sentIndex, arr);
       let wordsList = [];
-      arr.forEach((sItem) => {
+      arr.forEach(sItem => {
         let obj = {
           chs: sItem,
-          pinyin: "",
+          pinyin: ""
         };
         wordsList.push(obj);
       });
@@ -315,7 +345,7 @@ export default {
       let sentIndex = this.sentIndex;
       let sent_arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       let res_str = "";
-      sent_arr.forEach((item) => {
+      sent_arr.forEach(item => {
         if (item) {
           let bool = this.checkEn(item);
           if (bool) {
@@ -331,22 +361,22 @@ export default {
       });
       res_str = res_str.replace(/\s+/g, " ");
       let org_sent = this.paraCon.sentences[sentIndex];
-    //   if (res_str.trim() != org_sent.trim()) {
-    //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
-    //     return;
-    //   }
+      //   if (res_str.trim() != org_sent.trim()) {
+      //     this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
+      //     return;
+      //   }
       let textListList = [];
       let arr = this.paraCon.seg_words[sentIndex].sent_str.split(/\s+/);
       this.$set(this.paraCon.segList, sentIndex, arr);
       let segArr = this.paraCon.segList[sentIndex];
-      segArr.forEach((item) => {
+      segArr.forEach(item => {
         let str = Base64.encode(item);
         textListList.push(str);
       });
       let data = {
-        textListList: [textListList],
+        textListList: [textListList]
       };
-      createPinyin(data).then((res) => {
+      createPinyin(data).then(res => {
         let wordsList = res.data.result[0];
         this.$set(this.paraCon.wordsList, sentIndex, wordsList);
       });
@@ -370,7 +400,7 @@ export default {
       document.execCommand("copy");
       this.$message({
         message: "复制成功",
-        type: "success",
+        type: "success"
       });
       window.getSelection().removeAllRanges();
     },
@@ -399,7 +429,7 @@ export default {
       this.sentIndex += 1;
       //this.paraCon = this.curQue.detail[this.sentIndex];
     },
-    beforeClose() {},
+    beforeClose() {}
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -413,10 +443,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .NPC-para-list {
   border: 1px #cccccc solid;
@@ -475,4 +505,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue

@@ -146,6 +146,9 @@
                                 ? 'overActive'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                           >
                             <template>
                               <span
@@ -276,6 +279,10 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -395,6 +402,10 @@
                                 pItem.articleSentIndex
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -507,6 +518,9 @@
                                   pItem.articleSentIndex
                                 )
                               "
+                              :style="{
+                                fontFamily: pItem.config.fontFamily
+                              }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -677,6 +691,9 @@
                                   index
                                 )
                               "
+                              :style="{
+                                fontFamily: pItem.config.fontFamily
+                              }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -764,6 +781,10 @@
                                 index
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 1].config.fontFamily
+                            }"
                           >
                             {{
                               NumberList.indexOf(
@@ -863,6 +884,10 @@
                                 index
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 2].config.fontFamily
+                            }"
                           >
                             {{
                               NumberList.indexOf(
@@ -966,6 +991,9 @@
                                 index
                               )
                             "
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs[wIndex]
@@ -1223,7 +1251,10 @@ export default {
               isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
               startIndex: startIndex,
               endIndex: endIndex,
-              leg: wItem.chs.length
+              leg: wItem.chs.length,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             if (wordTimeList && wordTimeList.length > 0) {
               obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(

src/components/Adult/preview/ArticleViewChs/PhraseModelChs.vue

@@ -118,6 +118,9 @@
                                 pItem.words ? pItem.words : pItem.chs
                               )
                             "
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs
@@ -174,6 +177,10 @@
                                   : item.wordsList[pIndex + 1].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -254,6 +261,10 @@
                                   : item.wordsList[pIndex + 2].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -318,6 +329,9 @@
                               pItem.words ? pItem.words : pItem.chs
                             )
                           "
+                          :style="{
+                            fontFamily: pItem.config.fontFamily
+                          }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
                               ? pItem.chs
@@ -438,6 +452,9 @@
                                   pItem.words ? pItem.words : pItem.chs
                                 )
                               "
+                              :style="{
+                                fontFamily: pItem.config.fontFamily
+                              }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -490,6 +507,10 @@
                                   : item.sentArr[pIndex + 1].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 1].config.fontFamily
+                            }"
                           >
                             {{
                               NumberList.indexOf(
@@ -556,6 +577,10 @@
                                   : item.sentArr[pIndex + 2].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 2].config.fontFamily
+                            }"
                           >
                             {{
                               NumberList.indexOf(
@@ -623,6 +648,9 @@
                                 pItem.words ? pItem.words : pItem.chs
                               )
                             "
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs[wIndex]
@@ -913,7 +941,10 @@ export default {
               className: wItem.className,
               isShow: wItem.isShow,
               isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
-              words: words
+              words: words,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;
@@ -967,7 +998,10 @@ export default {
               startIndex: startIndex,
               endIndex: endIndex,
               leg: wItem.chs.length,
-              timeList: []
+              timeList: [],
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             sentArr.push(obj);
           });
@@ -1440,6 +1474,7 @@ export default {
         > div {
           display: flex;
           justify-content: center;
+          width: 100%;
         }
       }
     }

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -135,6 +135,9 @@
                                 : '',
                               sentIndex == index ? 'wordBlank' : ''
                             ]"
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs[wIndex]
@@ -182,6 +185,10 @@
                               : '',
                             sentIndex == index ? 'wordBlank' : ''
                           ]"
+                          :style="{
+                            fontFamily:
+                              item.sentArr[pIndex + 1].config.fontFamily
+                          }"
                         >
                           {{
                             NumberList.indexOf(
@@ -240,6 +247,10 @@
                               : '',
                             sentIndex == index ? 'wordBlank' : ''
                           ]"
+                          :style="{
+                            fontFamily:
+                              item.sentArr[pIndex + 2].config.fontFamily
+                          }"
                         >
                           {{
                             NumberList.indexOf(
@@ -303,6 +314,9 @@
                               : '',
                             sentIndex == index ? 'wordBlank' : ''
                           ]"
+                          :style="{
+                            fontFamily: pItem.config.fontFamily
+                          }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
                               ? pItem.chs[wIndex]
@@ -681,7 +695,10 @@ export default {
               startIndex: startIndex,
               endIndex: endIndex,
               leg: wItem.chs.length,
-              timeList: []
+              timeList: [],
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -112,6 +112,9 @@
                                 ? 'wordActive'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs
@@ -151,6 +154,10 @@
                                 ? 'active'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -220,6 +227,10 @@
                                 ? 'wordActive'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -274,6 +285,9 @@
                               ? 'padding'
                               : ''
                           ]"
+                          :style="{
+                            fontFamily: pItem.config.fontFamily
+                          }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
                               ? pItem.chs
@@ -380,6 +394,9 @@
                               v-for="(wItem, wIndex) in pItem.leg"
                               :key="'ci' + wIndex + pIndex + index"
                               :class="[]"
+                              :style="{
+                                fontFamily: pItem.config.fontFamily
+                              }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -418,7 +435,13 @@
                           >
                         </template>
                         <span class="NNPE-chs" style="text-align: left">
-                          <span :class="[]">
+                          <span
+                            :class="[]"
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 1].config.fontFamily
+                            }"
+                          >
                             {{
                               NumberList.indexOf(
                                 item.sentArr[pIndex + 1].pinyin
@@ -468,7 +491,13 @@
                           >
                         </template>
                         <span class="NNPE-chs" style="text-align: left">
-                          <span :class="[]">
+                          <span
+                            :class="[]"
+                            :style="{
+                              fontFamily:
+                                item.sentArr[pIndex + 2].config.fontFamily
+                            }"
+                          >
                             {{
                               NumberList.indexOf(
                                 item.sentArr[pIndex + 2].pinyin
@@ -523,6 +552,9 @@
                             v-for="(wItem, wIndex) in pItem.leg"
                             :key="'ci' + wIndex + pIndex + index"
                             :class="[]"
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs[wIndex]
@@ -760,7 +792,10 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;
@@ -1117,6 +1152,7 @@ export default {
         > div {
           display: flex;
           justify-content: center;
+          width: 100%;
         }
       }
     }

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -196,6 +196,9 @@
                                       item.timeList[pItem.sentIndex].ed
                                   )
                                 "
+                                :style="{
+                                  fontFamily: pItem.config.fontFamily
+                                }"
                                 >{{
                                   NumberList.indexOf(pItem.pinyin) == -1
                                     ? pItem.chs[wIndex]
@@ -289,6 +292,10 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -397,6 +404,10 @@
                                   item.timeList[pItem.sentIndex].ed
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -501,6 +512,9 @@
                                     item.timeList[pItem.sentIndex].ed
                                 )
                               "
+                              :style="{
+                                fontFamily: pItem.config.fontFamily
+                              }"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -808,7 +822,10 @@ export default {
               endIndex: endIndex,
               leg: wItem.chs.length,
               chstimeList: [],
-              fontSize: wItem.fontSize
+              fontSize: wItem.fontSize,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             if (wordTimeList && wordTimeList.length > 0) {
               obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -147,6 +147,9 @@
                                 pItem.words ? pItem.words : pItem.chs
                               )
                             "
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs
@@ -203,6 +206,10 @@
                                   : item.wordsList[pIndex + 1].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -292,6 +299,10 @@
                                   : item.wordsList[pIndex + 2].chs
                               )
                             "
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -359,6 +370,9 @@
                               pItem.words ? pItem.words : pItem.chs
                             )
                           "
+                          :style="{
+                            fontFamily: pItem.config.fontFamily
+                          }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
                               ? pItem.chs
@@ -691,7 +705,10 @@ export default {
               className: wItem.className,
               isShow: wItem.isShow,
               words: words,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -211,6 +211,9 @@
                                       : '',
                                     sentIndex == index ? 'wordBlank' : ''
                                   ]"
+                                  :style="{
+                                    fontFamily: pItem.config.fontFamily
+                                  }"
                                   >{{
                                     NumberList.indexOf(pItem.pinyin) == -1
                                       ? pItem.chs[wIndex]
@@ -265,6 +268,10 @@
                                     : '',
                                   sentIndex == index ? 'wordBlank' : ''
                                 ]"
+                                :style="{
+                                  fontFamily:
+                                    item.sentArr[pIndex + 1].config.fontFamily
+                                }"
                               >
                                 {{
                                   NumberList.indexOf(
@@ -332,6 +339,10 @@
                                     : '',
                                   sentIndex == index ? 'wordBlank' : ''
                                 ]"
+                                :style="{
+                                  fontFamily:
+                                    item.sentArr[pIndex + 2].config.fontFamily
+                                }"
                               >
                                 {{
                                   NumberList.indexOf(
@@ -410,6 +421,9 @@
                                     ? 'active'
                                     : ''
                                 ]"
+                                :style="{
+                                  fontFamily: pItem.config.fontFamily
+                                }"
                                 >{{ pItem.chs[wIndex] }}</span
                               >
                             </template>
@@ -821,7 +835,10 @@ export default {
               endIndex: endIndex,
               leg: wItem.chs.length,
               timeList: [],
-              words: words
+              words: words,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             sentArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

src/components/Adult/preview/DialogueArticleViewChs/WordModelChs.vue

@@ -139,6 +139,9 @@
                                 ? 'wordActive'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily: pItem.config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(pItem.pinyin) == -1
                                 ? pItem.chs
@@ -182,13 +185,21 @@
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
-                          <span class="NNPE-chs" style="text-align: left">{{
-                            NumberList.indexOf(
-                              item.wordsList[pIndex + 1].pinyin
-                            ) == -1
-                              ? item.wordsList[pIndex + 1].chs
-                              : ""
-                          }}</span>
+                          <span
+                            class="NNPE-chs"
+                            style="text-align: left"
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 1].config.fontFamily
+                            }"
+                            >{{
+                              NumberList.indexOf(
+                                item.wordsList[pIndex + 1].pinyin
+                              ) == -1
+                                ? item.wordsList[pIndex + 1].chs
+                                : ""
+                            }}</span
+                          >
                           <span
                             v-if="
                               curQue.pyPosition == 'bottom' &&
@@ -254,6 +265,10 @@
                                 ? 'wordActive'
                                 : ''
                             ]"
+                            :style="{
+                              fontFamily:
+                                item.wordsList[pIndex + 2].config.fontFamily
+                            }"
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -311,6 +326,9 @@
                               : ''
                           ]"
                           @click="showWordDetail($event, pItem)"
+                          :style="{
+                            fontFamily: pItem.config.fontFamily
+                          }"
                           >{{
                             NumberList.indexOf(pItem.pinyin) == -1
                               ? pItem.chs
@@ -619,7 +637,10 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              config: {
+                fontFamily: wItem.fontFamily
+              }
             };
             paraArr.push(obj);
             if (wItem.pinyin) dhaspinyin = true;

src/components/Adult/preview/Picture.vue

@@ -2,9 +2,9 @@
 <template>
   <div :class="['Big-Book-PictureBox']" v-if="isShowTemp">
     <!-- <ul class="Big-Book-PictureBox-item" v-for="(item,index) in curQue.queList" :key="index"> -->
-    <h2>{{curQue.title}}</h2>
+    <h2>{{ curQue.title }}</h2>
     <li v-for="(items, indexs) in curQue.option" :key="indexs">
-        <span class="xuhao" v-if="items.xuhao">{{items.xuhao}}</span>
+      <span class="xuhao" v-if="items.xuhao">{{ items.xuhao }}</span>
       <template v-if="ChildType != 'image_gdcy' && items.hanziSite == 'top'">
         <div class="hanzi-box hanzi-box-top" v-if="items.pinyin || items.hanzi">
           <span
@@ -12,12 +12,16 @@
               items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
             "
             class="pinyin"
+            :style="{ fontSize: items.fontSize.substring(0, 2) - 6 + 'px' }"
             >{{ items.pinyin }}</span
           >
-          <p v-if="items.hanzi" :style="{fontSize:items.fontSize}">{{ items.hanzi }}</p>
+          <p v-if="items.hanzi" :style="{ fontSize: items.fontSize }">
+            {{ items.hanzi }}
+          </p>
           <span
             v-if="items.pinyin && items.pinyinSite == 'bottom'"
             class="pinyin"
+            :style="{ fontSize: items.fontSize.substring(0, 2) - 6 + 'px' }"
             >{{ items.pinyin }}</span
           >
         </div>
@@ -37,7 +41,7 @@
       <template
         v-if="
           ChildType != 'image_gdcy' &&
-          (!items.hanziSite || items.hanziSite == 'bottom')
+            (!items.hanziSite || items.hanziSite == 'bottom')
         "
       >
         <div class="hanzi-box" v-if="items.pinyin || items.hanzi">
@@ -46,11 +50,15 @@
               items.pinyin && (!items.pinyinSite || items.pinyinSite == 'top')
             "
             class="pinyin"
+            :style="{ fontSize: items.fontSize.substring(0, 2) - 6 + 'px' }"
             >{{ items.pinyin }}</span
           >
-          <p v-if="items.hanzi" :style="{fontSize:items.fontSize}">{{ items.hanzi }}</p>
+          <p v-if="items.hanzi" :style="{ fontSize: items.fontSize }">
+            {{ items.hanzi }}
+          </p>
           <span
             v-if="items.pinyin && items.pinyinSite == 'bottom'"
+            :style="{ fontSize: items.fontSize.substring(0, 2) - 6 + 'px' }"
             class="pinyin"
             >{{ items.pinyin }}</span
           >
@@ -59,8 +67,8 @@
       <template
         v-if="
           ChildType == 'image_input' ||
-          ChildType == 'image_input_three' ||
-          ChildType == 'image_wordInput'
+            ChildType == 'image_input_three' ||
+            ChildType == 'image_wordInput'
         "
       >
         <template v-if="judgeAnswer == 'standardAnswer'">
@@ -71,7 +79,7 @@
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
             :class="['singleInput', 'userRight', inputAnswerClass('input', 0)]"
-            :style="{fontSize:items.fontSize}"
+            :style="{ fontSize: items.fontSize }"
           />
         </template>
         <template v-else>
@@ -82,7 +90,7 @@
             :readonly="TaskModel == 'ANSWER'"
             maxlength="200"
             :class="['singleInput', inputAnswerClass('input', 0)]"
-            :style="{fontSize:items.fontSize}"
+            :style="{ fontSize: items.fontSize }"
           />
         </template>
       </template>
@@ -90,7 +98,9 @@
       <!-- 补齐输入 -->
       <template v-if="ChildType == 'image_gdcy'">
         <div class="fill-box">
-          <b v-if="items.hanzi" :style="{fontSize:items.fontSize}">{{ items.hanzi }}</b>
+          <b v-if="items.hanzi" :style="{ fontSize: items.fontSize }">{{
+            items.hanzi
+          }}</b>
           <template v-if="judgeAnswer == 'standardAnswer'">
             <input
               v-model="curQue.correct[0].input[0]"
@@ -99,7 +109,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
           </template>
           <template v-else>
@@ -110,7 +120,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
           </template>
         </div>
@@ -125,7 +135,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
             <input
               placeholder=""
@@ -133,7 +143,7 @@
               :readonly="true"
               maxlength="200"
               :class="inputAnswerClass('input', 1)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
           </template>
           <template v-else>
@@ -144,7 +154,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 0)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
             <input
               placeholder=""
@@ -153,7 +163,7 @@
               :readonly="TaskModel == 'ANSWER'"
               maxlength="200"
               :class="inputAnswerClass('input', 1)"
-              :style="{fontSize:items.fontSize}"
+              :style="{ fontSize: items.fontSize }"
             />
           </template>
         </div>
@@ -165,7 +175,7 @@
             :class="[
               'right-btn',
               TaskModel != 'ANSWER' ? 'right-btn-hover' : '',
-              judgeAnswerClass('true'),
+              judgeAnswerClass('true')
             ]"
             @click="handleSelectJudge('true')"
           ></a>
@@ -173,7 +183,7 @@
             :class="[
               'error-btn',
               TaskModel != 'ANSWER' ? 'error-btn-hover' : '',
-              judgeAnswerClass('false'),
+              judgeAnswerClass('false')
             ]"
             @click="handleSelectJudge('false')"
           ></a>
@@ -190,7 +200,7 @@
               'xxoption',
               'option' + curQue.numberList.con,
               singleAnswerClass(indexss),
-              checkBoxAnswerClass(indexss),
+              checkBoxAnswerClass(indexss)
             ]"
           >
             <template v-if="judgeAnswer == 'standardAnswer'">
@@ -209,15 +219,26 @@
                     <span
                       v-if="
                         itemss.pinyin &&
-                        (!items.pinyinSite || items.pinyinSite == 'top')
+                          (!items.pinyinSite || items.pinyinSite == 'top')
                       "
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
-                    <p v-if="itemss.hanzi" :style="{fontSize:items.fontSize}">{{ itemss.hanzi }}</p>
+                    <p
+                      v-if="itemss.hanzi"
+                      :style="{ fontSize: items.fontSize }"
+                    >
+                      {{ itemss.hanzi }}
+                    </p>
                     <span
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
                   </div>
@@ -237,15 +258,26 @@
                     <span
                       v-if="
                         itemss.pinyin &&
-                        (!items.pinyinSite || items.pinyinSite == 'top')
+                          (!items.pinyinSite || items.pinyinSite == 'top')
                       "
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
-                    <p v-if="itemss.hanzi" :style="{fontSize:items.fontSize}">{{ itemss.hanzi }}</p>
+                    <p
+                      v-if="itemss.hanzi"
+                      :style="{ fontSize: items.fontSize }"
+                    >
+                      {{ itemss.hanzi }}
+                    </p>
                     <span
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
                   </div>
@@ -269,15 +301,26 @@
                     <span
                       v-if="
                         itemss.pinyin &&
-                        (!items.pinyinSite || items.pinyinSite == 'top')
+                          (!items.pinyinSite || items.pinyinSite == 'top')
                       "
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
-                    <p v-if="itemss.hanzi" :style="{fontSize:items.fontSize}">{{ itemss.hanzi }}</p>
+                    <p
+                      v-if="itemss.hanzi"
+                      :style="{ fontSize: items.fontSize }"
+                    >
+                      {{ itemss.hanzi }}
+                    </p>
                     <span
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
                   </div>
@@ -298,15 +341,26 @@
                     <span
                       v-if="
                         itemss.pinyin &&
-                        (!items.pinyinSite || items.pinyinSite == 'top')
+                          (!items.pinyinSite || items.pinyinSite == 'top')
                       "
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
-                    <p v-if="itemss.hanzi" :style="{fontSize:items.fontSize}">{{ itemss.hanzi }}</p>
+                    <p
+                      v-if="itemss.hanzi"
+                      :style="{ fontSize: items.fontSize }"
+                    >
+                      {{ itemss.hanzi }}
+                    </p>
                     <span
                       v-if="itemss.pinyin && items.pinyinSite == 'bottom'"
                       class="pinyin"
+                      :style="{
+                        fontSize: items.fontSize.substring(0, 2) - 6 + 'px'
+                      }"
                       >{{ itemss.pinyin }}</span
                     >
                   </div>
@@ -321,8 +375,8 @@
         class="luyinVoice-box"
         v-if="
           items.mp3_list.length > 0 ||
-          (fn_list_obj && fn_list_obj.indexOf('image_record') > -1) ||
-          items.RecordControl
+            (fn_list_obj && fn_list_obj.indexOf('image_record') > -1) ||
+            items.RecordControl
         "
       >
         <template v-if="items.mp3_list.length > 0">
@@ -367,12 +421,12 @@ export default {
         judge: [], // 判断
         single: [],
         checkBox: [],
-        recordList: [],
+        recordList: []
       }, // 记录用户答题内容
       recorder: new Recorder({
         sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
         sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
-        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+        numChannels: 1 // 声道，支持 1 或 2， 默认是1
       }),
       microphoneStatus: false,
       hasMicro: "", // 录音后的样式class
@@ -380,7 +434,7 @@ export default {
       audio: new window.Audio(),
       oldUrl: null, // 存储上个播放音频地址
       mp3Play: "", // 音频播放
-      userErrorNumberTotal: 0,
+      userErrorNumberTotal: 0
     };
   },
   computed: {
@@ -401,7 +455,7 @@ export default {
       return bool;
     },
     inputAnswerClass() {
-      return function (key, index) {
+      return function(key, index) {
         let _this = this;
         let classname = "";
         if (_this.judgeAnswer == "standardAnswer") {
@@ -424,7 +478,7 @@ export default {
       };
     },
     judgeAnswerClass() {
-      return function (type) {
+      return function(type) {
         let _this = this;
         let classname = "";
         let answer = _this.curQue.Bookanswer[0].judge[0].value;
@@ -465,7 +519,7 @@ export default {
       return result;
     },
     singleAnswerClass() {
-      return function (index) {
+      return function(index) {
         let _this = this;
         let classname = "";
         if (_this.ChildType == "image_single") {
@@ -496,7 +550,7 @@ export default {
       };
     },
     checkBoxAnswerClass() {
-      return function (index) {
+      return function(index) {
         let _this = this;
         let classname = "";
         if (_this.ChildType == "image_checkBox") {
@@ -526,7 +580,7 @@ export default {
         }
         return classname;
       };
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -550,9 +604,9 @@ export default {
                   userAnswerJudge:
                     item.input[0] || item.input[0] === 0
                       ? "[JUDGE##F##JUDGE]"
-                      : "",
-                },
-              ],
+                      : ""
+                }
+              ]
             };
             _this.userAnswer.input = JSON.parse(JSON.stringify(obj));
           }
@@ -565,16 +619,16 @@ export default {
                   userAnswerJudge:
                     item.input[0] || item.input[0] === 0
                       ? "[JUDGE##F##JUDGE]"
-                      : "",
+                      : ""
                 },
                 {
                   value: "",
                   userAnswerJudge:
                     item.input[1] || item.input[1] === 0
                       ? "[JUDGE##F##JUDGE]"
-                      : "",
-                },
-              ],
+                      : ""
+                }
+              ]
             };
             this.userAnswer.input = JSON.parse(JSON.stringify(obj));
           }
@@ -582,7 +636,7 @@ export default {
           if (_this.ChildType == "image_judge") {
             let obj_judge = {
               value: "",
-              userAnswerJudge: item.judge.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+              userAnswerJudge: item.judge.length > 0 ? "[JUDGE##F##JUDGE]" : ""
             };
             _this.userAnswer.judge.push(JSON.parse(JSON.stringify(obj_judge)));
           }
@@ -590,8 +644,7 @@ export default {
           if (_this.ChildType == "image_single") {
             let obj_single = {
               value: "",
-              userAnswerJudge:
-                item.single.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+              userAnswerJudge: item.single.length > 0 ? "[JUDGE##F##JUDGE]" : ""
             };
             _this.userAnswer.single.push(
               JSON.parse(JSON.stringify(obj_single))
@@ -602,7 +655,7 @@ export default {
             let obj_box = {
               value: [],
               userAnswerJudge:
-                item.checkBox.length > 0 ? "[JUDGE##F##JUDGE]" : "",
+                item.checkBox.length > 0 ? "[JUDGE##F##JUDGE]" : ""
             };
             _this.userAnswer.checkBox.push(JSON.parse(JSON.stringify(obj_box)));
           }
@@ -620,7 +673,7 @@ export default {
         }
       }
       let obj = "";
-      this.curQue.fn_list.forEach((node) => {
+      this.curQue.fn_list.forEach(node => {
         if (node.isFn) {
           obj += node.type + ",";
         }
@@ -686,9 +739,10 @@ export default {
       }
       this.$forceUpdate();
     },
-    overallClick(value){
-        this.curQue.Bookanswer[0].single[0].value = value===this.curQue.Bookanswer[0].single[0].value?'':value
-        this.changeSingle(this.curQue.Bookanswer[0].single[0].value)
+    overallClick(value) {
+      this.curQue.Bookanswer[0].single[0].value =
+        value === this.curQue.Bookanswer[0].single[0].value ? "" : value;
+      this.changeSingle(this.curQue.Bookanswer[0].single[0].value);
     },
     changeSingle(value) {
       let _this = this;
@@ -785,7 +839,7 @@ export default {
     handleWav(list, tmIndex) {
       tmIndex = tmIndex ? tmIndex : 0;
       this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -799,12 +853,12 @@ export default {
         checkBox: [],
         judge: [],
         input: [],
-        spell: [],
+        spell: []
       };
       this.answer.push(obj);
     }
     let _this = this;
-    _this.audio.addEventListener("ended", function () {
+    _this.audio.addEventListener("ended", function() {
       _this.mp3Play = "";
       _this.hasMicro = "normal";
     });
@@ -815,10 +869,10 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 //@import url(); 引入公共css类
 .Big-Book-PictureBox {
   width: 100%;
@@ -838,9 +892,9 @@ export default {
   //     margin: 0;
   //     display: flex;
   //     flex-flow: wrap;
-  h2{
+  h2 {
     word-break: break-word;
-    font-family: 'robot';
+    font-family: "robot";
     font-weight: 700;
     font-size: 20px;
     line-height: 150%;
@@ -854,21 +908,21 @@ export default {
     border: 1px solid rgba(0, 0, 0, 0.1);
     background: #fff;
     position: relative;
-    .xuhao{
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 14px;
-        font-family: 'robot';
-        color: #FFFFFF;
-        padding: 1px 4px;
-        background: #e35454;
-        border-radius: 8px;
-        display: block;
-        min-width: 16px;
-        text-align: center;
+    .xuhao {
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      font-family: "robot";
+      color: #ffffff;
+      padding: 1px 4px;
+      background: #e35454;
+      border-radius: 8px;
+      display: block;
+      min-width: 16px;
+      text-align: center;
     }
     .option_main {
       display: flex;
@@ -996,6 +1050,7 @@ export default {
         border-radius: 8px;
         &.mini {
           width: 64px;
+          justify-content: center;
         }
         &.normal {
           width: 129px;
@@ -1043,28 +1098,27 @@ export default {
       a {
         width: 70px;
         height: 32px;
-        background: #f7f7f7 url("../../../assets/NPC/right-btn-gray.png")
-          center no-repeat;
+        background: #f7f7f7 url("../../../assets/NPC/right-btn-gray.png") center
+          no-repeat;
         background-size: 24px;
         border-radius: 4px;
         border: 1px solid #f7f7f7;
         &.right-btn-hover:hover,
         &.active {
           background: #727272 url("../../../assets/NPC/right-btn-white.png")
-          center no-repeat;
+            center no-repeat;
           background-size: 24px;
           border-color: #727272;
         }
         &.error-btn {
-          background: #f7f7f7
-            url("../../../assets/NPC/error-btn-gray.png") center
-            no-repeat;
+          background: #f7f7f7 url("../../../assets/NPC/error-btn-gray.png")
+            center no-repeat;
           background-size: 24px;
           margin-left: 4px;
           &.error-btn-hover:hover,
           &.active {
             background: #727272 url("../../../assets/NPC/error-btn-white.png")
-                center no-repeat;
+              center no-repeat;
             background-size: 24px;
             border-color: #727272;
           }
@@ -1107,22 +1161,22 @@ export default {
   }
 }
 .NPC-Big-Book-preview-green {
-    .Big-Book-PictureBox {
-        li{
-            .xuhao{
-                background: #24b99e;
-            }
-        }
+  .Big-Book-PictureBox {
+    li {
+      .xuhao {
+        background: #24b99e;
+      }
     }
+  }
 }
 .NPC-Big-Book-preview-brown {
-    .Big-Book-PictureBox {
-        li{
-            .xuhao{
-                background: #bd8865;
-            }
-        }
+  .Big-Book-PictureBox {
+    li {
+      .xuhao {
+        background: #bd8865;
+      }
     }
+  }
 }
 </style>
 <style lang="scss">
@@ -1148,4 +1202,4 @@ li {
     }
   }
 }
-</style>
+</style>