生字一配六

src/components/Adult/Preview.vue

@@ -20,8 +20,8 @@
                 'content-con',
                 /^[\u4e00-\u9fa5]/.test(item.sentence) ? 'hasCn' : '',
               ]"
+              v-html="item.sentence"
             >
-              {{ item.sentence }}
             </p>
           </template>
           <template v-else>
@@ -81,6 +81,7 @@
               </div>
             </div>
           </template>
+          <p class="NNPE-title-item-en" v-html="item.en"></p>
         </div>
       </div>
       <div class="NNPE-operate" v-if="isShowTitle">
@@ -708,14 +709,14 @@ export default {
     .NNPE-title-left {
       display: flex;
       color: #ffffff;
-      font-size: 20px;
-      line-height: 28px;
-      align-items: flex-end;
+      font-size: 18px;
+      line-height: 18px;
+      align-items: center;
       .NNPE-title-item {
         margin-right: 12px;
       }
       .content-con {
-        margin: 0;
+        margin: 4px 0;
         font-family: "robot";
         &.hasCn,
         &.hanzi {
@@ -724,9 +725,16 @@ export default {
       }
       .content-en {
         font-weight: normal;
-        line-height: 28px;
+        line-height: 18px;
         font-family: "robot";
       }
+      .NNPE-title-item-en{
+          font-weight: normal;
+          line-height: 12px;
+          font-family: "robot";
+          font-size: 12px;
+          margin: 0;
+      }
       .con-box {
         display: flex;
         flex-flow: wrap;
@@ -740,9 +748,9 @@ export default {
         }
         .pinyin {
           font-family: "GB-PINYINOK-B";
-          font-size: 14px;
-          line-height: 22px;
-          height: 22px;
+          font-size: 12px;
+          line-height: 12px;
+          height: 12px;
           &.noFont {
             font-family: initial;
           }

src/components/Adult/preview/NewWordShow.vue

@@ -3,62 +3,70 @@
   <div class="Big-Book-prev-Textdes NewWordShow" v-if="curQue">
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
-      <div
-        class="item"
-        v-for="(item, index) in curQue.option"
-        :key="index"
-        :style="{
-          width: curQue.numberList ? 100 / curQue.numberList.con + '%' : 'auto',
-        }"
-      >
-        <p v-if="item.pinyin || item.en">
-          <span>{{ item.pinyin }}</span>
-          <span>{{ item.en }}</span>
-        </p>
-        <div class="con-box">
-          <template v-if="item.imgOrText == 'text'">
-            <template v-if="item.con">
-              <div
-                :key="conindex"
-                class="strockplay-newWord"
-                v-for="(conItem, conindex) in item.con"
-                @click="writeWord(conItem, item.pinyin)"
-              >
-                <Strockplayredline
-                  :Book_text="conItem"
-                  :playStorkes="true"
-                  :targetDiv="
-                    'bwcHanziIntp' + index + conItem + conindex + indexStr
-                  "
-                />
-                <div
-                  class="bwc-line"
-                  v-if="conindex < item.con.length - 1"
-                ></div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="blank-item" @click="freeWrite('', index)">
-                <img :src="freeImg[index]" v-if="freeImg[index]" />
-              </div>
-            </template>
-          </template>
-          <template v-else>
+        <div class="item-pre"
+              v-for="(item, index) in curQue.option"
+              :key="index">
             <div
-              class="img-box"
-              v-for="(imgItem, imgIndex) in item.img_list"
-              :key="imgIndex"
-              @click="freeWrite(imgItem.url, imgIndex)"
+                class="item"
+                style="margin-right:20px"
             >
-              <el-image :src="imgItem.url" fit="scale-down" class="img_url">
-                <div slot="placeholder" class="image-slot">
-                  <img src="../../../assets/common/icon-imgloading.png" />
+                <p v-if="item.pinyin || item.en">
+                    <span>{{ item.pinyin }}</span>
+                    <span>{{ item.en }}</span>
+                </p>
+                <div class="con-box">
+                <template v-if="item.imgOrText == 'text'">
+                    <template v-if="item.con">
+                    <div
+                        :key="conindex"
+                        class="strockplay-newWord"
+                        v-for="(conItem, conindex) in item.con"
+                        @click="writeWord(conItem, item.pinyin)"
+                    >
+                        <Strockplayredline
+                        :Book_text="conItem"
+                        :playStorkes="true"
+                        :targetDiv="
+                            'bwcHanziIntp' + index + conItem + conindex + indexStr
+                        "
+                        />
+                        <div
+                        class="bwc-line"
+                        v-if="conindex < item.con.length - 1"
+                        ></div>
+                    </div>
+                    </template>
+                    <template v-else>
+                    <div class="blank-item" @click="freeWrite('', index, 0)">
+                        <img :src="freeImg[index][0]" v-if="freeImg[index][0]" />
+                    </div>
+                    </template>
+                </template>
+                <template v-else>
+                    <div
+                    class="img-box"
+                    v-for="(imgItem, imgIndex) in item.img_list"
+                    :key="imgIndex"
+                    @click="freeWrite(imgItem.url, imgIndex, 0)"
+                    >
+                    <el-image :src="imgItem.url" 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>
-              </el-image>
             </div>
-          </template>
+            <template v-if="item.type&&item.type.indexOf('lm')>-1">
+                <div class="con-box" v-for="indexs in 6" :key="indexs">
+                    <div class="blank-item" @click="freeWrite('', index, indexs+1)">
+                        <img :src="freeImg[index][indexs+1]" v-if="freeImg[index][indexs+1]" />
+                    </div>
+                </div>
+            </template>
         </div>
-      </div>
+      
     </div>
     <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
       <Practice
@@ -93,6 +101,7 @@ export default {
       ifFreeShow: false,
       freeImg: [],
       activeIndex: null,
+      activeColIndex: null,
     };
   },
   computed: {},
@@ -103,17 +112,19 @@ export default {
     handleData() {
       let _this = this;
       _this.freeImg = [];
-      _this.curQue.option.forEach((item) => {
-        _this.freeImg.push("");
+      _this.curQue.option.forEach((item,index) => {
+          let itemImg = ['','','','','','','']
+          _this.$set(_this.freeImg,index,itemImg)
       });
     },
     changePraShow() {
       this.isPraShow = false;
       this.ifFreeShow = false;
-      this.freeImg[this.activeIndex] = this.$refs.freePaint.imgSrc;
+      this.freeImg[this.activeIndex][this.activeColIndex] = this.$refs.freePaint.imgSrc;
     },
     async writeWord(words, pinyin) {
       this.activeIndex = null;
+      this.activeColIndex = null
       const MethodName = "tool-ChineseSCConvert";
       const data = {
         text: words,
@@ -132,14 +143,17 @@ export default {
       };
       this.isPraShow = true;
     },
-    freeWrite(imgUrl, index) {
+    freeWrite(imgUrl, index, indexs) {
       this.ifFreeShow = true;
       this.curDataImg = imgUrl;
       this.activeIndex = imgUrl ? null : index;
+      this.activeColIndex = imgUrl ? null : indexs;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+      this.handleData()
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -164,16 +178,18 @@ export default {
     color: #000000;
   }
   .item-box {
-    display: flex;
-    flex-flow: wrap;
     padding-bottom: 8px;
     padding: 0 4px;
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
-    align-items: flex-end;
+    .item-pre{
+        display: flex;
+        flex-flow: wrap;
+        align-items: flex-end;
+        padding: 9px 20px;
+    }
     .item {
-      padding: 9px 20px;
       box-sizing: border-box;
       // width: 66px;
       cursor: pointer;
@@ -226,7 +242,8 @@ export default {
           height: 64px;
         }
       }
-      .blank-item {
+    }
+    .blank-item {
         width: 64px;
         height: 64px;
         background: #fff url("../../../assets/NPC/chinaTianRed.png") center
@@ -236,7 +253,6 @@ export default {
           width: 100%;
           height: 100%;
         }
-      }
     }
   }
   .practiceBox {