问答题 生字展示 移动端

src/components/Adult/Preview.vue

@@ -595,6 +595,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
@@ -604,6 +605,7 @@
                         :theme-color="themeColor"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template
@@ -734,6 +736,7 @@
                         :index-str="index + '_' + indexs + '_' + indexss"
                         :task-model="TaskModel"
                         :judge-answer="itemJ"
+                        :isPhone="isPhone"
                       />
                     </template>
                     <template

src/components/Adult/preview/InputHasRecord.vue

@@ -2,7 +2,10 @@
 <template>
   <div
     class="Big-Book-prev-Textdes InputHasRecordNPC"
-    :class="[curQue.guide ? 'NPC-zhedie' : '']"
+    :class="[
+      curQue.guide ? 'NPC-zhedie' : '',
+      isPhone ? 'InputHasRecordNPC-phone' : ''
+    ]"
     v-if="
       curQue && judgeAnswer == 'standardAnswer'
         ? userErrList.length > 0
@@ -34,10 +37,10 @@
                 <template
                   v-if="
                     items.detail.wordsList[indexCon + 1] &&
-                    items.detail.wordsList[indexCon + 1].chs &&
-                    chsFhList.indexOf(
-                      items.detail.wordsList[indexCon + 1].chs
-                    ) > -1
+                      items.detail.wordsList[indexCon + 1].chs &&
+                      chsFhList.indexOf(
+                        items.detail.wordsList[indexCon + 1].chs
+                      ) > -1
                   "
                 >
                   <div class="synthesis-box">
@@ -46,16 +49,20 @@
                         v-if="items.detail.pyPosition == 'top'"
                         class="pinyin"
                         :class="[
-                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
                         >{{ itemCon.pinyin }}</span
                       >
-                      <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{ itemCon.chs }}</span>
+                      <span
+                        class="hanzi content-con"
+                        :style="wordStyle(itemCon.config)"
+                        >{{ itemCon.chs }}</span
+                      >
                       <span
                         v-if="items.detail.pyPosition == 'bottom'"
                         class="pinyin"
                         :class="[
-                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                          noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                         ]"
                         >{{ itemCon.pinyin }}</span
                       >
@@ -69,13 +76,17 @@
                             items.detail.wordsList[indexCon + 1].pinyin
                           ) > -1
                             ? 'noFont'
-                            : '',
+                            : ''
                         ]"
                         >{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
                       >
-                      <span class="hanzi content-con" :style="wordStyle(items.detail.resArr[indexCon + 1].config)">{{
-                        items.detail.wordsList[indexCon + 1].chs
-                      }}</span>
+                      <span
+                        class="hanzi content-con"
+                        :style="
+                          wordStyle(items.detail.resArr[indexCon + 1].config)
+                        "
+                        >{{ items.detail.wordsList[indexCon + 1].chs }}</span
+                      >
                       <span
                         v-if="items.detail.pyPosition == 'bottom'"
                         class="pinyin"
@@ -84,7 +95,7 @@
                             items.detail.wordsList[indexCon + 1].pinyin
                           ) > -1
                             ? 'noFont'
-                            : '',
+                            : ''
                         ]"
                         >{{ items.detail.wordsList[indexCon + 1].pinyin }}</span
                       >
@@ -96,16 +107,20 @@
                     v-if="items.detail.pyPosition == 'top'"
                     class="pinyin"
                     :class="[
-                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
                     >{{ itemCon.pinyin }}</span
                   >
-                  <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{ itemCon.chs }}</span>
+                  <span
+                    class="hanzi content-con"
+                    :style="wordStyle(itemCon.config)"
+                    >{{ itemCon.chs }}</span
+                  >
                   <span
                     v-if="items.detail.pyPosition == 'bottom'"
                     class="pinyin"
                     :class="[
-                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                     ]"
                     >{{ itemCon.pinyin }}</span
                   >
@@ -114,12 +129,15 @@
             </div>
           </template>
         </div>
-        <div class="inputInner" :style="{marginLeft:items.number===''?'0px':''}">
+        <div
+          class="inputInner"
+          :style="{ marginLeft: items.number === '' ? '0px' : '' }"
+        >
           <el-input
             :class="[
               'textarea',
               items.record ? '' : 'textareaNoRecord',
-              'correct',
+              'correct'
             ]"
             type="textarea"
             v-model="items.answer"
@@ -195,10 +213,10 @@
                       <template
                         v-if="
                           items.detail.wordsList[indexCon + 1] &&
-                          items.detail.wordsList[indexCon + 1].chs &&
-                          chsFhList.indexOf(
-                            items.detail.wordsList[indexCon + 1].chs
-                          ) > -1
+                            items.detail.wordsList[indexCon + 1].chs &&
+                            chsFhList.indexOf(
+                              items.detail.wordsList[indexCon + 1].chs
+                            ) > -1
                         "
                       >
                         <div class="synthesis-box">
@@ -209,20 +227,22 @@
                               :class="[
                                 noFont.indexOf(itemCon.pinyin) > -1
                                   ? 'noFont'
-                                  : '',
+                                  : ''
                               ]"
                               >{{ itemCon.pinyin }}</span
                             >
-                            <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{
-                              itemCon.chs
-                            }}</span>
+                            <span
+                              class="hanzi content-con"
+                              :style="wordStyle(itemCon.config)"
+                              >{{ itemCon.chs }}</span
+                            >
                             <span
                               v-if="items.detail.pyPosition == 'bottom'"
                               class="pinyin"
                               :class="[
                                 noFont.indexOf(itemCon.pinyin) > -1
                                   ? 'noFont'
-                                  : '',
+                                  : ''
                               ]"
                               >{{ itemCon.pinyin }}</span
                             >
@@ -236,15 +256,23 @@
                                   items.detail.wordsList[indexCon + 1].pinyin
                                 ) > -1
                                   ? 'noFont'
-                                  : '',
+                                  : ''
                               ]"
                               >{{
                                 items.detail.wordsList[indexCon + 1].pinyin
                               }}</span
                             >
-                            <span class="hanzi content-con" :style="wordStyle(items.detail.resArr[indexCon + 1].config)">{{
-                              items.detail.wordsList[indexCon + 1].chs
-                            }}</span>
+                            <span
+                              class="hanzi content-con"
+                              :style="
+                                wordStyle(
+                                  items.detail.resArr[indexCon + 1].config
+                                )
+                              "
+                              >{{
+                                items.detail.wordsList[indexCon + 1].chs
+                              }}</span
+                            >
                             <span
                               v-if="items.detail.pyPosition == 'bottom'"
                               class="pinyin"
@@ -253,7 +281,7 @@
                                   items.detail.wordsList[indexCon + 1].pinyin
                                 ) > -1
                                   ? 'noFont'
-                                  : '',
+                                  : ''
                               ]"
                               >{{
                                 items.detail.wordsList[indexCon + 1].pinyin
@@ -267,16 +295,20 @@
                           v-if="items.detail.pyPosition == 'top'"
                           class="pinyin"
                           :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           >{{ itemCon.pinyin }}</span
                         >
-                        <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{ itemCon.chs }}</span>
+                        <span
+                          class="hanzi content-con"
+                          :style="wordStyle(itemCon.config)"
+                          >{{ itemCon.chs }}</span
+                        >
                         <span
                           v-if="items.detail.pyPosition == 'bottom'"
                           class="pinyin"
                           :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           >{{ itemCon.pinyin }}</span
                         >
@@ -285,7 +317,10 @@
                   </div>
                 </template>
               </div>
-              <div class="inputInner" :style="{marginLeft:items.number===''?'0px':''}">
+              <div
+                class="inputInner"
+                :style="{ marginLeft: items.number === '' ? '0px' : '' }"
+              >
                 <el-input
                   :class="[
                     'textarea',
@@ -297,13 +332,14 @@
                         '[JUDGE##T##JUDGE]'
                         ? 'correct'
                         : 'error'
-                      : '',
+                      : ''
                   ]"
                   type="textarea"
                   v-model="curQue.Bookanswer[indexs].answer"
                   @blur="
-                    curQue.Bookanswer[indexs].answer =
-                      curQue.Bookanswer[indexs].answer.trim()
+                    curQue.Bookanswer[indexs].answer = curQue.Bookanswer[
+                      indexs
+                    ].answer.trim()
                   "
                   placeholder=""
                   maxlength="200"
@@ -354,10 +390,10 @@
                   <template
                     v-if="
                       items.detail.wordsList[indexCon + 1] &&
-                      items.detail.wordsList[indexCon + 1].chs &&
-                      chsFhList.indexOf(
-                        items.detail.wordsList[indexCon + 1].chs
-                      ) > -1
+                        items.detail.wordsList[indexCon + 1].chs &&
+                        chsFhList.indexOf(
+                          items.detail.wordsList[indexCon + 1].chs
+                        ) > -1
                     "
                   >
                     <div class="synthesis-box">
@@ -366,16 +402,20 @@
                           v-if="items.detail.pyPosition == 'top'"
                           class="pinyin"
                           :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           >{{ itemCon.pinyin }}</span
                         >
-                        <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{ itemCon.chs }}</span>
+                        <span
+                          class="hanzi content-con"
+                          :style="wordStyle(itemCon.config)"
+                          >{{ itemCon.chs }}</span
+                        >
                         <span
                           v-if="items.detail.pyPosition == 'bottom'"
                           class="pinyin"
                           :class="[
-                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                            noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                           ]"
                           >{{ itemCon.pinyin }}</span
                         >
@@ -389,15 +429,19 @@
                               items.detail.wordsList[indexCon + 1].pinyin
                             ) > -1
                               ? 'noFont'
-                              : '',
+                              : ''
                           ]"
                           >{{
                             items.detail.wordsList[indexCon + 1].pinyin
                           }}</span
                         >
-                        <span class="hanzi content-con" :style="wordStyle(items.detail.resArr[indexCon + 1].config)">{{
-                          items.detail.wordsList[indexCon + 1].chs
-                        }}</span>
+                        <span
+                          class="hanzi content-con"
+                          :style="
+                            wordStyle(items.detail.resArr[indexCon + 1].config)
+                          "
+                          >{{ items.detail.wordsList[indexCon + 1].chs }}</span
+                        >
                         <span
                           v-if="items.detail.pyPosition == 'bottom'"
                           class="pinyin"
@@ -406,7 +450,7 @@
                               items.detail.wordsList[indexCon + 1].pinyin
                             ) > -1
                               ? 'noFont'
-                              : '',
+                              : ''
                           ]"
                           >{{
                             items.detail.wordsList[indexCon + 1].pinyin
@@ -420,16 +464,20 @@
                       v-if="items.detail.pyPosition == 'top'"
                       class="pinyin"
                       :class="[
-                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                       ]"
                       >{{ itemCon.pinyin }}</span
                     >
-                    <span class="hanzi content-con" :style="wordStyle(itemCon.config)">{{ itemCon.chs }}</span>
+                    <span
+                      class="hanzi content-con"
+                      :style="wordStyle(itemCon.config)"
+                      >{{ itemCon.chs }}</span
+                    >
                     <span
                       v-if="items.detail.pyPosition == 'bottom'"
                       class="pinyin"
                       :class="[
-                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '',
+                        noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                       ]"
                       >{{ itemCon.pinyin }}</span
                     >
@@ -438,7 +486,10 @@
               </div>
             </template>
           </div>
-          <div class="inputInner" :style="{marginLeft:items.number===''?'0px':''}">
+          <div
+            class="inputInner"
+            :style="{ marginLeft: items.number === '' ? '0px' : '' }"
+          >
             <el-input
               :class="[
                 'textarea',
@@ -452,13 +503,14 @@
                       ? 'correct'
                       : 'error'
                     : ''
-                  : '',
+                  : ''
               ]"
               type="textarea"
               v-model="curQue.Bookanswer[indexs].answer"
               @blur="
-                curQue.Bookanswer[indexs].answer =
-                  curQue.Bookanswer[indexs].answer.trim()
+                curQue.Bookanswer[indexs].answer = curQue.Bookanswer[
+                  indexs
+                ].answer.trim()
               "
               placeholder=""
               maxlength="200"
@@ -492,7 +544,7 @@ import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 import AnswerTitle from "../preview/components/AnswerTitle.vue";
 export default {
   components: { Soundrecord, AnswerTitle },
-  props: ["curQue", "TaskModel", "judgeAnswer"],
+  props: ["curQue", "TaskModel", "judgeAnswer", "isPhone"],
   data() {
     return {
       wordShow: true,
@@ -500,24 +552,23 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
       noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
       answerArr: [],
-      userErrList: [],
+      userErrList: []
     };
   },
   computed: {
     wordStyle() {
-      return function (config) {
-        if(config){
-            let sizeVal = config.fontSize.replace("px", "");
-            return {
-                minHeight: Number(sizeVal) + 9 + "px",
-                lineHeight: Number(sizeVal) + 8 + "px",
-                fontSize: config.fontSize,
-                fontFamily: config.fontFamily
-            };
+      return function(config) {
+        if (config) {
+          let sizeVal = config.fontSize.replace("px", "");
+          return {
+            minHeight: Number(sizeVal) + 9 + "px",
+            lineHeight: Number(sizeVal) + 8 + "px",
+            fontSize: config.fontSize,
+            fontFamily: config.fontFamily
+          };
         }
-        
       };
-    },
+    }
   },
   watch: {},
   //方法集合
@@ -559,7 +610,7 @@ export default {
         curCorrect.push({
           answer: "",
           recordList: [],
-          userAnswerJudge: dItem.answer ? "[JUDGE##F##JUDGE]" : "",
+          userAnswerJudge: dItem.answer ? "[JUDGE##F##JUDGE]" : ""
         });
         let paraArr = [];
         dItem.detail.wordsList.forEach((sItem, sIndex) => {
@@ -569,12 +620,12 @@ export default {
             chs: sItem.chs,
             isShow: sItem.isShow,
             config: {
-                fontColor: sItem.fontColor,
-                fontFamily: sItem.fontFamily,
-                fontSize: sItem.fontSize,
-                underLine: sItem.underLine,
-                wordPadding: sItem.wordPadding,
-            },
+              fontColor: sItem.fontColor,
+              fontFamily: sItem.fontFamily,
+              fontSize: sItem.fontSize,
+              underLine: sItem.underLine,
+              wordPadding: sItem.wordPadding
+            }
           };
           paraArr.push(obj);
         });
@@ -607,7 +658,7 @@ export default {
     },
     handleChangeTab() {
       this.wordShow = !this.wordShow;
-    },
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -621,10 +672,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-prev-Textdes {
@@ -815,6 +866,11 @@ export default {
     }
   }
 }
+.InputHasRecordNPC-phone {
+  .inputInner {
+    margin-bottom: 12px;
+  }
+}
 </style>
 <style lang="scss">
 .InputHasRecordNPC {
@@ -843,4 +899,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/Adult/preview/NewWordShow.vue

@@ -1,78 +1,199 @@
 <!--  -->
 <template>
-  <div v-if="curQue" class="Big-Book-prev-Textdes NewWordShow">
+  <div
+    v-if="curQue"
+    class="Big-Book-prev-Textdes NewWordShow"
+    :class="[isPhone ? 'NewWordShow-phone' : '']"
+  >
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
       <div v-for="(item, index) in curQue.option" :key="index" class="item-pre">
-        <template v-if="item.pinyin">
-          <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
-            item.pinyin
-          }}</span>
-        </template>
-        <div class="item" style="margin-right: 20px">
-          <div
-            class="con-box"
-            v-if="
-              (item.imgOrText && item.imgOrText == 'text' && item.con) ||
-                (item.imgOrText == 'image' && item.img_list.length > 0)
-            "
-          >
-            <template v-if="item.imgOrText == 'text'">
-              <template v-if="item.con">
+        <template v-if="isPhone">
+          <div class="item-info">
+            <template v-if="item.pinyin">
+              <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
+                item.pinyin
+              }}</span>
+            </template>
+            <div
+              class="con-box"
+              v-if="
+                (item.imgOrText && item.imgOrText == 'text' && item.con) ||
+                  (item.imgOrText == 'image' && item.img_list.length > 0)
+              "
+            >
+              <template v-if="item.imgOrText == 'text'">
+                <template v-if="item.con">
+                  <div
+                    v-for="(conItem, conindex) in item.con"
+                    :key="conindex"
+                    class="strockplay-newWord"
+                    @click="writeWord(conItem, item.pinyin)"
+                  >
+                    <Strockplayredline
+                      :Book_text="conItem"
+                      :play-storkes="true"
+                      :target-div="
+                        'bwcHanziIntp' +
+                          index +
+                          conItem +
+                          conindex +
+                          indexStr +
+                          judgeAnswer
+                      "
+                    />
+                    <div
+                      v-if="conindex < item.con.length - 1"
+                      class="bwc-line"
+                    />
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="blank-item" @click="freeWrite('', index, 0)">
+                    <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
+                  </div>
+                </template>
+              </template>
+              <template v-else-if="item.imgOrText == 'image'">
                 <div
-                  v-for="(conItem, conindex) in item.con"
-                  :key="conindex"
-                  class="strockplay-newWord"
-                  @click="writeWord(conItem, item.pinyin)"
+                  v-for="(imgItem, imgIndex) in item.img_list"
+                  :key="imgIndex"
+                  class="img-box"
+                  @click="freeWrite(imgItem.id, imgIndex, 0)"
                 >
-                  <Strockplayredline
-                    :Book_text="conItem"
-                    :play-storkes="true"
-                    :target-div="
-                      'bwcHanziIntp' +
-                        index +
-                        conItem +
-                        conindex +
-                        indexStr +
-                        judgeAnswer
-                    "
-                  />
-                  <div v-if="conindex < item.con.length - 1" class="bwc-line" />
+                  <el-image :src="imgItem.id" fit="scale-down" class="img_url">
+                    <div slot="placeholder" class="image-slot">
+                      <img src="../../../assets/common/icon-imgloading.png" />
+                    </div>
+                  </el-image>
                 </div>
               </template>
-              <template v-else>
-                <div class="blank-item" @click="freeWrite('', index, 0)">
-                  <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
-                </div>
-              </template>
-            </template>
-            <template v-else-if="item.imgOrText == 'image'">
+            </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 ? '66px' : ''
+              }"
+              >{{ item.en }}</span
+            >
+          </div>
+
+          <div class="item">
+            <template v-if="item.type && item.type.indexOf('lm') > -1">
               <div
-                v-for="(imgItem, imgIndex) in item.img_list"
-                :key="imgIndex"
-                class="img-box"
-                @click="freeWrite(imgItem.id, imgIndex, 0)"
+                v-for="(items, indexs) in item.imgarr"
+                :key="indexs"
+                class="con-box"
               >
-                <el-image :src="imgItem.id" fit="scale-down" class="img_url">
-                  <div slot="placeholder" class="image-slot">
-                    <img src="../../../assets/common/icon-imgloading.png" />
-                  </div>
-                </el-image>
+                <div
+                  class="strockplay-newWord"
+                  @click="freeWrite(items, index, indexs)"
+                >
+                  <!-- <div
+                @click.stop="playHanzi(index, indexs, items)"
+                :class="[
+                  'strock-play-box',
+                  themeColor == 'green'
+                    ? 'green-border'
+                    : themeColor == 'red'
+                    ? 'red-border'
+                    : themeColor == 'brown'
+                    ? 'brown-border'
+                    : 'red-border',
+                ]"
+              ></div> -->
+                  <img
+                    v-if="!playStatus && items && items.strokes_image_url"
+                    :src="items.strokes_image_url"
+                    alt=""
+                  />
+                  <!-- <FreeWriteQP
+                :id="'cans' + index + indexs"
+                :ref="'cans'"
+                :height="256"
+                :width="256"
+              /> -->
+                </div>
               </div>
             </template>
           </div>
-
-          <template v-if="item.type && item.type.indexOf('lm') > -1">
+        </template>
+        <template v-else>
+          <template v-if="item.pinyin">
+            <span class="pinyin" :style="{ width: pinyinWidth + 'px' }">{{
+              item.pinyin
+            }}</span>
+          </template>
+          <div class="item" style="margin-right: 20px">
             <div
-              v-for="(items, indexs) in item.imgarr"
-              :key="indexs"
               class="con-box"
+              v-if="
+                (item.imgOrText && item.imgOrText == 'text' && item.con) ||
+                  (item.imgOrText == 'image' && item.img_list.length > 0)
+              "
             >
+              <template v-if="item.imgOrText == 'text'">
+                <template v-if="item.con">
+                  <div
+                    v-for="(conItem, conindex) in item.con"
+                    :key="conindex"
+                    class="strockplay-newWord"
+                    @click="writeWord(conItem, item.pinyin)"
+                  >
+                    <Strockplayredline
+                      :Book_text="conItem"
+                      :play-storkes="true"
+                      :target-div="
+                        'bwcHanziIntp' +
+                          index +
+                          conItem +
+                          conindex +
+                          indexStr +
+                          judgeAnswer
+                      "
+                    />
+                    <div
+                      v-if="conindex < item.con.length - 1"
+                      class="bwc-line"
+                    />
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="blank-item" @click="freeWrite('', index, 0)">
+                    <img v-if="freeImg[index][0]" :src="freeImg[index][0]" />
+                  </div>
+                </template>
+              </template>
+              <template v-else-if="item.imgOrText == 'image'">
+                <div
+                  v-for="(imgItem, imgIndex) in item.img_list"
+                  :key="imgIndex"
+                  class="img-box"
+                  @click="freeWrite(imgItem.id, imgIndex, 0)"
+                >
+                  <el-image :src="imgItem.id" fit="scale-down" class="img_url">
+                    <div slot="placeholder" class="image-slot">
+                      <img src="../../../assets/common/icon-imgloading.png" />
+                    </div>
+                  </el-image>
+                </div>
+              </template>
+            </div>
+
+            <template v-if="item.type && item.type.indexOf('lm') > -1">
               <div
-                class="strockplay-newWord"
-                @click="freeWrite(items, index, indexs)"
+                v-for="(items, indexs) in item.imgarr"
+                :key="indexs"
+                class="con-box"
               >
-                <!-- <div
+                <div
+                  class="strockplay-newWord"
+                  @click="freeWrite(items, index, indexs)"
+                >
+                  <!-- <div
                 @click.stop="playHanzi(index, indexs, items)"
                 :class="[
                   'strock-play-box',
@@ -85,31 +206,32 @@
                     : 'red-border',
                 ]"
               ></div> -->
-                <img
-                  v-if="!playStatus && items && items.strokes_image_url"
-                  :src="items.strokes_image_url"
-                  alt=""
-                />
-                <!-- <FreeWriteQP
+                  <img
+                    v-if="!playStatus && items && items.strokes_image_url"
+                    :src="items.strokes_image_url"
+                    alt=""
+                  />
+                  <!-- <FreeWriteQP
                 :id="'cans' + index + indexs"
                 :ref="'cans'"
                 :height="256"
                 :width="256"
               /> -->
+                </div>
               </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
-        >
+            </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
+          >
+        </template>
       </div>
     </div>
     <el-dialog
@@ -195,7 +317,8 @@ export default {
     "indexStr",
     "currentTreeID",
     "TaskModel",
-    "judgeAnswer"
+    "judgeAnswer",
+    "isPhone"
   ],
   data() {
     return {
@@ -212,8 +335,7 @@ export default {
         writeModel: {} // 生词/取词模式
       },
       pinyinWidth: 91,
-      enMargin: 13,
-      isPhone: false // 是否是移动端打开
+      enMargin: 13
     };
   },
   computed: {},
@@ -229,8 +351,6 @@ export default {
     // } else {
     _this.handleAnswerData();
     // }
-    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
-    this.isPhone = regExp.test(navigator.userAgent);
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -489,23 +609,23 @@ export default {
         text-align: center;
         margin: 0 0 8px 0;
       }
-      .strockplay {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        width: 64px;
-        height: 64px;
-      }
-      .strockplayRedInner {
-        width: 64px;
-        height: 64px;
-      }
-      .bwc-line {
-        width: 1px;
-        height: 62px;
-        background: #de4444;
-      }
+    }
+    .strockplay {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      width: 64px;
+      height: 64px;
+    }
+    .strockplayRedInner {
+      width: 64px;
+      height: 64px;
+    }
+    .bwc-line {
+      width: 1px;
+      height: 62px;
+      background: #de4444;
     }
     .con-box {
       width: 66px;
@@ -564,6 +684,26 @@ export default {
       padding-top: 0px;
     }
   }
+  &-phone {
+    .item-box {
+      .item-pre {
+        padding: 10px 4px;
+      }
+      .item-info {
+        .pinyin {
+          width: 66px !important;
+        }
+      }
+      .con-box {
+        margin: 0;
+      }
+      .item {
+        margin-top: 10px;
+        gap: 10px;
+        justify-content: start;
+      }
+    }
+  }
 }
 .NPC-Big-Book-preview-brown {
   .NewWordShow {