adultInput

src/api/ajax.js

@@ -224,4 +224,23 @@ export function createPinyin(data) {
     method: 'post',
     data
   })
+}
+
+// 
+export function getHZChineseInfo(data) {
+  let userInfor = getToken();
+  let UserCode = '',
+    UserType = '',
+    SessionID = ''
+  if (userInfor) {
+    let user = JSON.parse(getToken());
+    UserCode = user.user_code;
+    UserType = user.user_type;
+    SessionID = user.session_id;
+  }
+  return request({
+    url: `/GCLSHMToolsServer/api/baidu/chineseInfo?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}`,
+    method: 'post',
+    data
+  })
 }

src/components/Adult/Preview.vue

@@ -167,6 +167,7 @@ export default {
         }
       }
     },
+   
     // 上一页
     handleNNPEprev() {
       const _this = this;

src/components/Adult/common/SentenceModule.vue

@@ -1,14 +1,14 @@
 <!--  -->
 <template>
-  <div class="Big-Book-SentenceModule">
+  <div class="Big-Book-SentenceModule" v-if="curQueItem">
     <div class="Big-Book-top">
-      <span>内容</span>
+      <span>序号</span>
       <el-input
         type="textarea"
         autosize
-        placeholder="请输入文字"
-        v-model="curQueItem.con"
-        @blur="onBlur(curQueItem, 'con')"
+        placeholder="请输入序号"
+        v-model="curQueItem.number"
+        @blur="onBlur(curQueItem, 'number')"
       ></el-input>
       <div class="deleteOptionBox">
         <img
@@ -19,15 +19,8 @@
         />
       </div>
     </div>
-    <div class="Big-Book-top">
-      <span>序号</span>
-      <el-input
-        type="textarea"
-        autosize
-        placeholder="请输入序号"
-        v-model="curQueItem.number"
-        @blur="onBlur(curQueItem, 'number')"
-      ></el-input>
+    <div class="NPC-sentence-Segword">
+      <SentenceSegwordChs :curQue="curQueItem.detail" />
     </div>
     <div class="Big-Book-top">
       <span>答案</span>
@@ -59,24 +52,16 @@
         :uploadType="'mp3'"
       />
     </div>
-    <!-- <div class="Big-Book-mp3">
-      <span>音频</span>
-      <Upload
-        :changeFillId="changeMp3"
-        :datafileList="fileCon.mp3_list"
-        :filleNumber="mp3Number"
-        :uploadType="'mp3'"
-      />
-    </div> -->
   </div>
 </template>
 
 <script>
+import SentenceSegwordChs from "./SentenceSegwordChs/index.vue";
 import Upload from "./Upload.vue";
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
 export default {
-  components: { Upload },
+  components: { Upload, SentenceSegwordChs },
   props: [
     "curQue",
     "curQueItem",
@@ -262,7 +247,7 @@ export default {
     // display: flex;
     // justify-content: flex-start;
     // align-items: center;
-    > div {
+    > .Big-Book-top {
       display: flex;
       justify-content: flex-start;
       align-items: center;
@@ -272,6 +257,9 @@ export default {
         font-size: 14px;
       }
     }
+    .NPC-sentence-Segword {
+      margin-top: 16px;
+    }
   }
 
   &-mp3 {

src/components/Adult/common/SentenceSegwordChs/components/ClauseresultChs.vue

@@ -0,0 +1,79 @@
+<!-- 分句组件 -->
+<template>
+  <div class="Big-Book-Maxwidth NPC-Clauseresult">
+    <div class="Big-Book-con-top">
+      <span class="Big-Book-left-text">句子：</span>
+    </div>
+    <div class="NPC-sentence-list">
+      <el-input
+        style="width: 85%；white-space:nowrap;"
+        type="textarea"
+        :autosize="{ minRows: 2 }"
+        placeholder="请输入内容"
+        v-model="curQue.sentence"
+        @blur="onBlur(curQue, 'sentence')"
+      ></el-input>
+
+      <el-button type="primary" size="small" @click="sureClause"
+        >生词分词</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Clauseresult",
+  components: {},
+  props: ["curQue", "segByWord"],
+  data() {
+    return {
+      para_list: [],
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    onBlur(item, field) {
+      item[field] = item[field] ? item[field].trim() : "";
+    },
+    sureClause() {
+      let _this = this;
+      _this.segByWord(_this.curQue.sentence);
+    },
+    editClause(item) {
+      item.isReadonly = false;
+    },
+    oneClickResult() {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    console.log("====句子==分句====");
+    console.log(this.curQue);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NPC-sentence-list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  margin-bottom: 10px;
+}
+.NPC-Clauseresult {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+</style>

src/components/Adult/common/SentenceSegwordChs/components/SegbywordChs.vue

@@ -0,0 +1,298 @@
+<!-- 分句组件 -->
+<template>
+  <div class="Big-Book-Maxwidth NPC-Clauseresult">
+    <div class="Big-Book-con-top">
+      <span class="Big-Book-left-text">分词结果：</span>
+    </div>
+    <div class="NPC-para-list">
+      <div class="NPC-sentence-list">
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 2 }"
+          placeholder="请输入内容"
+          v-model="curQue.seg_words"
+          :readonly="true"
+        ></el-input>
+        <el-button type="danger" size="small" @click="proofSegWords"
+          >校对</el-button
+        >
+      </div>
+    </div>
+
+    <el-dialog
+      title="校对分词"
+      :visible.sync="proofVisible"
+      width="60%"
+      :close-on-click-modal="false"
+      top="10px"
+    >
+      <div class="NPC-words" v-if="curQue">
+        <div class="NPC-words-box">
+          <span class="Big-Book-left-text">原句：</span>
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 1 }"
+            placeholder="请输入内容"
+            v-model="curQue.sentence"
+            :readonly="true"
+          ></el-input>
+        </div>
+        <div class="NPC-words-box">
+          <span class="Big-Book-left-text">分词：</span>
+          <el-input
+            type="textarea"
+            :autosize="{ minRows: 1 }"
+            placeholder="请输入内容"
+            v-model="curQue.seg_words"
+            @click="handleChangeWords"
+            @blur="onBlur(curQue, 'seg_words')"
+          ></el-input>
+          <div class="NPC-gPinyin">
+            <el-button type="danger" size="small" @click="_createPinyin"
+              >确定生成拼音</el-button
+            >
+          </div>
+        </div>
+        <template>
+          <div class="NPC-words-box">
+            <span class="Big-Book-left-text">校对拼音：</span>
+            <div class="NPC-words-list">
+              <el-table :data="curQue.wordsList" border style="width: 400px">
+                <el-table-column prop="chs" label="词" width="180">
+                </el-table-column>
+                <el-table-column label="拼音" width="220">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.pinyin"
+                      placeholder="请输入拼音"
+                      @blur="onBlur(scope.row, 'pinyin')"
+                    ></el-input>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div></div>
+            </div>
+            <div class="yunmu">
+              <span>点击可复制</span>
+              <table border="1" class="yunmu-table">
+                <tr
+                  v-for="(item, index) in tableData"
+                  :key="'tableData' + index"
+                >
+                  <td
+                    v-for="(tdItem, tdIndex) in item"
+                    :key="'td' + index + tdIndex"
+                    :id="'td' + index + tdIndex"
+                    @click="CopyToClipboard('td' + index + tdIndex)"
+                  >
+                    {{ tdItem }}
+                  </td>
+                </tr>
+              </table>
+            </div>
+          </div>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="save">保存</el-button>
+          </span>
+        </template>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+              
+
+<script>
+import { createPinyin } from "@/api/ajax";
+import { Base64 } from "js-base64";
+export default {
+  name: "SentenceSegbywordChs",
+  components: {},
+  props: ["curQue", "segList"],
+  data() {
+    return {
+      proofVisible: false,
+      tableData: [
+        ["ā", "á", "ǎ", "à"],
+        ["ō", "ó", "ǒ", "ò"],
+        ["ē", "é", "ě", "è"],
+        ["ī", "í", "ǐ", "ì"],
+        ["ū", "ú", "ǔ", "ù"],
+        ["ǖ", "ǘ", "ǚ", "ǜ"],
+        ["Ā", "Á", "Â", "À"],
+        ["Ō", "Ó", "Ô", "Ò"],
+        ["Ē", "É", "Ê", "È"],
+        ["Ī", "Í", "Î", "Ì"],
+        ["Ū", "Ú", "Û", "Ù"],
+      ],
+    };
+  },
+  computed: {},
+  watch: {
+    segList: {
+      handler: function (newVal, oldVal) {
+        if (newVal != oldVal) {
+          this.getParaSegWordsResult();
+        }
+      },
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    onBlur(item, field) {
+      item[field] = item[field] ? item[field].trim() : "";
+    },
+    handleChangeWords() {},
+    //获取段落中句子分词结果
+    getParaSegWordsResult() {
+      let segList = this.curQue.segList;
+      let seg_words = segList && segList.length > 0 ? segList.join(" ") : "";
+      this.$set(this.curQue, "seg_words", seg_words);
+    },
+
+    //校对分词
+    proofSegWords() {
+      this.proofVisible = true;
+    },
+    checkEn(str) {
+      var RegExp = /^[a-zA-Z]+$/;
+      return RegExp.test(str);
+    },
+    //生成拼音
+    _createPinyin() {
+      let sent_arr = this.curQue.seg_words.split(/\s+/);
+      let res_str = "";
+      sent_arr.forEach((item) => {
+        if (item) {
+          let bool = this.checkEn(item);
+          if (bool) {
+            res_str += item.trim() + " ";
+          } else if (item == "(") {
+            res_str += " " + item.trim() + " ";
+          } else if (item == ")") {
+            res_str += " " + item.trim() + " ";
+          } else {
+            res_str += item.trim();
+          }
+        }
+      });
+      res_str = res_str.replace(/\s+/g, " ");
+      let org_sent = this.curQue.sentence;
+      if (res_str.trim() != org_sent.trim()) {
+        this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
+        return;
+      }
+      let textListList = [];
+      let arr = this.curQue.seg_words.split(/\s+/);
+      this.$set(this.curQue, "segList", arr);
+      let segArr = this.curQue.segList;
+      segArr.forEach((item) => {
+        let str = Base64.encode(item);
+        textListList.push(str);
+      });
+      let data = {
+        textListList: [textListList],
+      };
+      createPinyin(data).then((res) => {
+        let wordsList = res.data.result[0];
+        this.$set(this.curQue, "wordsList", wordsList);
+      });
+    },
+    CopyToClipboard(element) {
+      var doc = document,
+        text = doc.getElementById(element),
+        range,
+        selection;
+      if (doc.body.createTextRange) {
+        range = doc.body.createTextRange();
+        range.moveToElementText(text);
+        range.select();
+      } else if (window.getSelection) {
+        selection = window.getSelection();
+        range = doc.createRange();
+        range.selectNodeContents(text);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("copy");
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+      window.getSelection().removeAllRanges();
+    },
+    save() {
+      let _this = this;
+      _this.$message.success("保存成功");
+    },
+
+    beforeClose() {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    console.log("====分词结果====");
+    console.log(this.curQue.detail);
+    this.getParaSegWordsResult();
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NPC-Clauseresult {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.NPC-para-list {
+  .NPC-sentence-list {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+}
+.NPC-words-box {
+  position: relative;
+  margin-bottom: 10px;
+}
+.NPC-words-list {
+  height: 400px;
+  overflow-y: scroll;
+}
+.dialog-top-btn {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 15px;
+}
+.NPC-gPinyin {
+  margin-top: 10px;
+}
+.yunmu {
+  position: absolute;
+  left: 460px;
+  top: 80px;
+  &-table {
+    width: 260px;
+    > tr {
+      td {
+        cursor: pointer;
+        text-align: center;
+        font-size: 16px;
+        height: 26px;
+      }
+    }
+  }
+}
+</style>

src/components/Adult/common/SentenceSegwordChs/index.vue

@@ -0,0 +1,171 @@
+<!--  -->
+<template>
+  <div
+    class="NPC-Book-Article Big-Book-Maxwidth"
+    v-if="curQue"
+    v-loading="loading"
+  >
+    <div class="NPC-Book-model">
+      <span class="Big-Book-left-text">拼音位置：</span>
+      <el-radio-group v-model="curQue.pyPosition">
+        <el-radio :label="'top'">字上面</el-radio>
+        <el-radio :label="'bottom'">字下面</el-radio>
+      </el-radio-group>
+    </div>
+    <!---分句-->
+    <div class="NPC-Book-Paragraph">
+      <Clauseresult :curQue="curQue" :segByWord="segByWord" />
+    </div>
+    <!---分词-->
+    <div class="NPC-Book-Word" v-if="isByWord">
+      <Segbyword :curQue="curQue" :segList="segList" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { BatchSegContent } from "@/api/ajax";
+const Base64 = require("js-base64").Base64;
+import Clauseresult from "./components/ClauseresultChs.vue";
+import Segbyword from "./components/SegbywordChs.vue";
+
+export default {
+  name: "SentenceSegwordChs",
+  components: {
+    Clauseresult,
+    Segbyword,
+  },
+  props: ["curQue", "changeCurQue", "tmIndex"],
+  data() {
+    return {
+      isByWord: false,
+      cTVisible: false,
+      loading: false,
+      segList: null,
+      data_structure: {
+        type: "sentence_segword_chs",
+        name: "句子分词",
+        pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+        sentence: "", //句子
+        segList: [], //分词结果
+        seg_words: "",
+        wordsList: [],
+      },
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    forceUpdate() {
+      this.$forceUpdate();
+    },
+    changeIsPara() {
+      this.isPara = true;
+    },
+    changeIsClause(isClause) {
+      this.isClause = isClause;
+    },
+    //生成分词
+    segByWord(sentence) {
+      console.log(sentence);
+      this.loading = true;
+      let textList = [];
+      let str = Base64.encode(sentence);
+      textList.push(str);
+
+      let data = {
+        textList: textList,
+      };
+      BatchSegContent(data).then((res) => {
+        this.loading = false;
+        let list = res.data.result.list[0];
+        this.$set(this.curQue, "segList", list);
+        console.log(this.curQue);
+        this.segList = list;
+        this.isByWord = true;
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      if (this.curQue.seg_words) {
+        this.isByWord = true;
+      }
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+p {
+  margin: 0;
+  padding: 0;
+}
+.uploadArt_list {
+  border: 1px #ccc solid;
+  border-bottom: 0;
+  margin-top: 10px;
+  > li {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px #ccc solid;
+
+    > span {
+      width: 320px;
+      word-wrap: break-word;
+      font-size: 14px;
+      color: rgb(112, 110, 110);
+      border-right: 1px #ccc solid;
+      padding: 5px 10px;
+    }
+    > p {
+      flex: 1;
+      padding: 5px 10px;
+    }
+    .imgNumber {
+      width: 80px;
+    }
+    .del-close {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+  }
+}
+.NPC-Book-Article {
+  > div {
+    margin-bottom: 16px;
+  }
+}
+.NPC-Book-model {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  > span {
+    margin-right: 10px;
+  }
+}
+.lrc-box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  > span {
+    font-size: 14px;
+    margin-right: 16px;
+  }
+}
+</style>

src/components/Adult/common/data.js

@@ -598,9 +598,8 @@ let fnData = [{
   type: "sentence",
   name: "句子模板",
   list: [
-
     {
-      type: "sentence_answer",
+      type: "sentence_input",
       name: "句子填空",
     },
     {
@@ -612,34 +611,6 @@ let fnData = [{
       name: "句子录音",
     },
   ],
-  data_structure: {
-    type: "sentence",
-    name: "句子模板",
-    title: "",
-    option: [{
-      mp3_list: [],
-      number: "",
-      con: "",
-      answer: "",
-      judge: true,
-    }],
-    fn_list: [{
-      type: 'record',
-      name: '录音',
-      isFn: false,
-    },
-    {
-      type: 'input',
-      name: '输入',
-      isFn: false,
-    },
-    {
-      type: 'judge',
-      name: '判断',
-      isFn: false,
-    },
-    ],
-  },
 },
 {
   type: "text_input_RecoedItem",

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

@@ -2964,7 +2964,7 @@ export default {
         const obj = {
           name: file.name,
           url: file.response.file_info_list[0].file_url,
-          id: "[FID##" + item.response.file_info_list[0].file_id + "#FID]",
+          id: "[FID##" + file.response.file_info_list[0].file_id + "#FID]",
           imgNumber: 0,
         };
         this.curQue.img_list.push(obj);

src/components/Adult/inputModules/Sentence.vue

@@ -3,7 +3,7 @@
   <div class="Big-Book-sentence" v-if="curQue">
     <div
       class="Big-Book-Single-content"
-      style="margin-left: 50px; margin-top: 20px"
+      style="margin-left: 20px; margin-top: 20px"
     >
       <div class="Big-Book-con">
         <span>标题</span>
@@ -86,6 +86,43 @@ export default {
           },
         ],
       },
+      data_structure_sentence: {
+        type: "sentence",
+        name: "句子模板",
+        title: "",
+        option: [
+          {
+            mp3_list: [],
+            number: "",
+            detail: {
+              pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
+              sentence: "", //句子
+              segList: [], //分词结果
+              seg_words: "",
+              wordsList: [],
+            },
+            answer: "",
+            judge: true,
+          },
+        ],
+        fn_list: [
+          {
+            type: "record",
+            name: "录音",
+            isFn: false,
+          },
+          {
+            type: "input",
+            name: "输入",
+            isFn: false,
+          },
+          {
+            type: "judge",
+            name: "判断",
+            isFn: false,
+          },
+        ],
+      },
     };
   },
   computed: {},
@@ -118,6 +155,10 @@ export default {
         obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
       } else if (this.type == "inputItem_chs") {
         obj = JSON.parse(JSON.stringify(this.data_structure2.option[0]));
+      } else if (this.type.indexOf("sentence") > -1) {
+        obj = JSON.parse(
+          JSON.stringify(this.data_structure_sentence.option[0])
+        );
       }
       this.curQue.option.push(obj);
     },
@@ -137,18 +178,35 @@ export default {
       //     return item;
       //   });
     },
+    //处理数据
+    handleStructure(type) {
+      let data = JSON.parse(JSON.stringify(this.data_structure_sentence));
+      data.fn_list.map((item) => {
+        if (item.type == type) {
+          item.isFn = true;
+        }
+        return item;
+      });
+      return data;
+    },
     initcurQue() {
       let data = null;
       if (this.type == "recordHZ_inputPY_chs") {
         data = JSON.parse(JSON.stringify(this.data_structure));
       } else if (this.type == "inputItem_chs") {
         data = JSON.parse(JSON.stringify(this.data_structure2));
+      } else if (this.type.indexOf("sentence_") > -1) {
+        let child_type_arr = this.type.split("_");
+        let child_type = child_type_arr[1];
+        data = this.handleStructure(child_type);
       }
       this.changeCurQue(data);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    console.log("句子控件的录入");
+    debugger;
     if (!this.curQue) {
       this.initcurQue();
     }

src/components/Adult/preview/components/Practice.vue

@@ -13,104 +13,109 @@
       />
       <el-tabs type="border-card">
         <el-tab-pane label="简体">
-              <div class="left-content">
-                <div class="strockplay">
-                    <Strockplayredline
-                        :playStorkes="true"
-                        :wordNum="item.con.length"
-                        :Book_text="item.con"
-                        :targetDiv="'pra' + item.con + index"
-                    />
-                    </div>
-                    <div class="left-content-pra"> </div>
-                    <div class="footer">
-                        <div @click="collectFlag = !collectFlag" class="bg-box">
-                            <img
-                            :src="
-                                collectFlag
-                                ? require('../../../../assets/NPC/icon-collect-red.png')
-                                : require('../../../../assets/NPC/icon-collect-red.png')
-                            "
-                            class="practice-icon"
-                            />
-                            收藏
-                        </div>
-                    </div>
-                </div>
-                <template>
-                    <div class="right-content">
-                        <div class="right-strockred">
-                            <template v-if="navIndex == 0">
-                            <Strockred
-                                :Book_text="cur.stem[0].con"
-                                :hanzicolor="hanzicolor"
-                                :playStorkes="playStorkes"
-                                :targetDiv="'write-pra' + cur.stem[0].con"
-                            />
-                            </template>
-                            <template v-else>
-                                <Freewrite
-                                    :cur="cur"
-                                    :lineColor="hanzicolor"
-                                    :lineWidth="hanziweight"
-                                    ref="freewrite"
-                                />
-                                <div class="footer">
-                                    <div class="pen-colors">
-                                    <!-- <img
+          <div class="left-content">
+            <div class="strockplay">
+              <Strockplayredline
+                :playStorkes="true"
+                :wordNum="item.con.length"
+                :Book_text="item.con"
+                :targetDiv="'pra' + item.con + index"
+              />
+            </div>
+            <div class="left-content-pra"></div>
+            <div class="footer">
+              <div @click="collectFlag = !collectFlag" class="bg-box">
+                <img
+                  :src="
+                    collectFlag
+                      ? require('../../../../assets/NPC/icon-collect-red.png')
+                      : require('../../../../assets/NPC/icon-collect-red.png')
+                  "
+                  class="practice-icon"
+                />
+                收藏
+              </div>
+            </div>
+          </div>
+          <template>
+            <div class="right-content">
+              <div class="right-strockred">
+                <template v-if="navIndex == 0">
+                  <Strockred
+                    :Book_text="cur.stem[0].con"
+                    :hanzicolor="hanzicolor"
+                    :playStorkes="playStorkes"
+                    :targetDiv="'write-pra' + cur.stem[0].con"
+                  />
+                </template>
+                <template v-else>
+                  <Freewrite
+                    :cur="cur"
+                    :lineColor="hanzicolor"
+                    :lineWidth="hanziweight"
+                    ref="freewrite"
+                  />
+                  <div class="footer">
+                    <div class="pen-colors">
+                      <!-- <img
                                         class="write-icon-3"
                                         src="../../assets/common/write-icon-3.png"
                                     /> -->
-                                    <ul class="colors-list">
-                                        <li
-                                        :class="
-                                            colorIndex == index ? 'color-item-active' + index : ''
-                                        "
-                                        :key="'color' + index"
-                                        @click="changeColor(index)"
-                                        v-for="(item, index) in 5"
-                                        >
-                                        <span :class="'color-item' + index"></span>
-                                        </li>
-                                    </ul>
-                                    <img
-                                        @click="resetHuahua(index)"
-                                        class="clean-btn"
-                                        src="../../../../assets/common/icon-clean.png"
-                                    />
-                                    </div>
-                                    <div class="pen" v-if="navIndex == 1">
-                                        <img
-                                            :src="penIndex == 0 ? thinpenActive : thinpen"
-                                            @click="changePen(0)"
-                                            class="pen-img"
-                                        />
-                                        <img
-                                            :src="penIndex == 1 ? thickpenActive : thickpen"
-                                            @click="changePen(1)"
-                                            class="pen-img"
-                                        />
-                                        </div>
-                                    </div>
-                                </template>
-                        </div>
-
-                        <ul class="nav-list">
-                            <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">
-                            描红模式
-                            </li>
-                            <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">
-                            自由书写
-                            </li>
-                        </ul>
+                      <ul class="colors-list">
+                        <li
+                          :class="
+                            colorIndex == index
+                              ? 'color-item-active' + index
+                              : ''
+                          "
+                          :key="'color' + index"
+                          @click="changeColor(index)"
+                          v-for="(item, index) in 5"
+                        >
+                          <span :class="'color-item' + index"></span>
+                        </li>
+                      </ul>
+                      <img
+                        @click="resetHuahua(index)"
+                        class="clean-btn"
+                        src="../../../../assets/common/icon-clean.png"
+                      />
+                    </div>
+                    <div class="pen" v-if="navIndex == 1">
+                      <img
+                        :src="penIndex == 0 ? thinpenActive : thinpen"
+                        @click="changePen(0)"
+                        class="pen-img"
+                      />
+                      <img
+                        :src="penIndex == 1 ? thickpenActive : thickpen"
+                        @click="changePen(1)"
+                        class="pen-img"
+                      />
                     </div>
+                  </div>
                 </template>
+              </div>
+
+              <ul class="nav-list">
+                <li
+                  :class="navIndex == 0 ? 'active' : ''"
+                  @click="changeNav(0)"
+                >
+                  描红模式
+                </li>
+                <li
+                  :class="navIndex == 1 ? 'active' : ''"
+                  @click="changeNav(1)"
+                >
+                  自由书写
+                </li>
+              </ul>
+            </div>
+          </template>
         </el-tab-pane>
-        <el-tab-pane label="繁体">
-            
-        </el-tab-pane>
+        <el-tab-pane label="繁体"> </el-tab-pane>
       </el-tabs>
-    
     </div>
   </div>
 </template>
@@ -132,7 +137,7 @@ export default {
   props: ["cur", "changePraShow"],
   data() {
     return {
-    //   learn_mode: "",
+      //   learn_mode: "",
       playStorkes: false,
       navIndex: 0,
       colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
@@ -199,7 +204,7 @@ export default {
   max-height: 434px;
   overflow: auto;
   margin: 0 auto;
-  background: #F3F3F3;
+  background: #f3f3f3;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
   .clean-btn {
@@ -229,15 +234,15 @@ export default {
     flex-direction: column;
     justify-content: center;
     width: 144px;
-    .left-content-pra{
-        height: 162px;
+    .left-content-pra {
+      height: 162px;
     }
   }
   .right-content {
     position: relative;
     width: 288px;
     height: 338px;
-    background: #F3F3F3;
+    background: #f3f3f3;
     border-radius: 16px;
     box-sizing: border-box;
     padding: 16px;
@@ -263,12 +268,12 @@ export default {
         font-weight: bold;
         font-size: 14px;
         line-height: 34px;
-        color: #FF5757;
+        color: #ff5757;
         cursor: pointer;
-        background: #FFE6E6;
+        background: #ffe6e6;
         border-radius: 8px;
         &.active {
-          background: #FF5757;
+          background: #ff5757;
           color: #ffffff;
         }
       }
@@ -368,13 +373,13 @@ export default {
 .strockplay {
   width: 144px;
   height: 144px;
-  border: 2px solid #DE4444;
+  border: 2px solid #de4444;
   border-radius: 8px;
   box-sizing: border-box;
   overflow: hidden;
-  .strockplayRedInner{
-      width: 100%;
-      height: 100%;
+  .strockplayRedInner {
+    width: 100%;
+    height: 100%;
   }
 }
 .left-content .footer {
@@ -390,7 +395,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: #FFFFFF;
+    background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
     border-radius: 4px;
@@ -400,10 +405,10 @@ export default {
     // &:nth-child(2) {
     //   margin: 0 24px;
     // }
-    img{
-        width: 24px;
-        height: 24px;
-        margin: 0;
+    img {
+      width: 24px;
+      height: 24px;
+      margin: 0;
     }
   }
   .practice-icon {
@@ -423,42 +428,45 @@ export default {
     color: #ba7d21;
   }
 }
-.el-tabs{
-    width: 100%;
+.el-tabs {
+  width: 100%;
 }
 </style>
 <style lang="scss">
 .practiceSingle {
-    .strock-play-box {
-        width: 24px !important;
-        height: 24px !important;
-    }
-    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
-        color: #000;
-    }
-    .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
-        color: #000;
-    }
-    .el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item{
-        color: #000;
-        font-size: 16px;
-        line-height: 150%;
-        line-height: 48px;
-        height: 48px;
-        width: 80px;
-        text-align: center;
-        font-weight: normal;
-        border: none;
-    }
-    .el-tabs--border-card>.el-tabs__header{
-        background: #F3F3F3;
-        border: none;
-    }
-    .el-tabs--border-card>.el-tabs__content{
-        padding: 24px;
-    }
-    .el-tab-pane{
-        display: flex;
-    }
+  .strock-play-box {
+    width: 24px !important;
+    height: 24px !important;
+  }
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #000;
+  }
+  .el-tabs--border-card
+    > .el-tabs__header
+    .el-tabs__item:not(.is-disabled):hover {
+    color: #000;
+  }
+  .el-tabs__item,
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item {
+    color: #000;
+    font-size: 16px;
+    line-height: 150%;
+    line-height: 48px;
+    height: 48px;
+    width: 80px;
+    text-align: center;
+    font-weight: normal;
+    border: none;
+  }
+  .el-tabs--border-card > .el-tabs__header {
+    background: #f3f3f3;
+    border: none;
+  }
+  .el-tabs--border-card > .el-tabs__content {
+    padding: 24px;
+  }
+  .el-tab-pane {
+    display: flex;
+  }
 }
 </style>

src/components/Adult/preview/components/Wordcard.vue

@@ -5,17 +5,19 @@
       <i class="el-icon-close" @click="changeWordCard(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
-        <span v-if="word.detail.pinyin">{{word.detail.pinyin}}</span>
+      <span v-if="word.detail.pinyin">{{ word.detail.pinyin }}</span>
       <Audio
         :fontSize="20"
-        :mp3="word.detail.mp3_list.length>0 ? word.detail.mp3_list[0].url : ''"
+        :mp3="
+          word.detail.mp3_list.length > 0 ? word.detail.mp3_list[0].url : ''
+        "
         :pinyin="word.detail.pinyin"
       />
     </div>
     <div
       class="bwc-Strockplay"
       :style="{ width: word.detail.new_word.length * 126 + 6 + 'px' }"
-      v-if="word.detail.new_word.length<5"
+      v-if="word.detail.new_word.length < 5"
     >
       <div
         :key="conindex"
@@ -31,17 +33,28 @@
         <img
           src="../../../../assets/NPC/icon-write-red.png"
           class="collect-icon"
-          v-if="word.detail.new_word.length>1"
+          v-if="word.detail.new_word.length > 1"
           @click="writeWord(conItem)"
         />
-        <div class="bwc-line" v-if="conindex < word.detail.new_word.length - 1"></div>
+        <div
+          class="bwc-line"
+          v-if="conindex < word.detail.new_word.length - 1"
+        ></div>
       </div>
     </div>
-    <p v-else class="bwc-tolength"><span v-for="(item,index) in word.detail.new_word" :key="index">{{item}}</span></p>
-    <div class="bwc-word-en" v-if="word.detail && word.detail.definition_list.length>0">
-        <span v-for="(item,index) in word.detail.definition_list" :key="index">
-            {{item}}{{index==word.detail.definition_list.length-1?'':'；'}}
-        </span>
+    <p v-else class="bwc-tolength">
+      <span v-for="(item, index) in word.detail.new_word" :key="index">{{
+        item
+      }}</span>
+    </p>
+    <div
+      class="bwc-word-en"
+      v-if="word.detail && word.detail.definition_list.length > 0"
+    >
+      <span v-for="(item, index) in word.detail.definition_list" :key="index">
+        {{ item
+        }}{{ index == word.detail.definition_list.length - 1 ? "" : "；" }}
+      </span>
     </div>
     <div class="bwc-more-intp" @click="viewIntp">更多释义</div>
     <div class="bwc-footer">
@@ -52,7 +65,11 @@
         />
         收藏
       </button>
-      <button class="bwc-btn bwc-btn2" @click="writeWord(word.detail.new_word,word.detail.pinyin)" v-if="word.detail.new_word.length==1">
+      <button
+        class="bwc-btn bwc-btn2"
+        @click="writeWord(word.detail.new_word, word.detail.pinyin)"
+        v-if="word.detail.new_word.length == 1"
+      >
         <img
           src="../../../../assets/NPC/icon-write-red.png"
           class="collect-icon"
@@ -60,8 +77,8 @@
         写一写
       </button>
     </div>
-    <div class="practiceBox" v-if="isPraShow">
-        <Practice :changePraShow="changePraShow" :cur="curData" />
+    <div class="practiceBox practiceBoxStrock" v-if="isPraShow">
+      <Practice :changePraShow="changePraShow" :cur="curData" />
     </div>
     <div class="practiceBox" v-if="isIntpShow">
       <Wordintp :changeIntpShow="changeIntpShow" :word="word" />
@@ -112,19 +129,13 @@ export default {
   },
   //方法集合
   methods: {
-    writeWord(words,pinyin) {
+    writeWord(words, pinyin) {
       this.isPraShow = true;
       this.curData = {
         stem: [
           {
-            con:
-              words
-                ? words
-                : "",
-            pinyin:
-              pinyin && pinyin
-                ? pinyin
-                : "",
+            con: words ? words : "",
+            pinyin: pinyin && pinyin ? pinyin : "",
             mp3_url: "",
           },
         ],
@@ -142,27 +153,27 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-      console.log(this.word)
+    console.log(this.word);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
     if (this.word) {
-    //   this.curData = {
-    //     stem: [
-    //       {
-    //         con:
-    //           _this.word.detail && _this.word.detail.new_word
-    //             ? _this.word.detail.new_word
-    //             : "",
-    //         pinyin:
-    //           _this.word.detail && _this.word.detail.pinyin
-    //             ? _this.word.detail.pinyin
-    //             : "",
-    //         mp3_url: "",
-    //       },
-    //     ],
-    //   };
+      //   this.curData = {
+      //     stem: [
+      //       {
+      //         con:
+      //           _this.word.detail && _this.word.detail.new_word
+      //             ? _this.word.detail.new_word
+      //             : "",
+      //         pinyin:
+      //           _this.word.detail && _this.word.detail.pinyin
+      //             ? _this.word.detail.pinyin
+      //             : "",
+      //         mp3_url: "",
+      //       },
+      //     ],
+      //   };
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -189,6 +200,12 @@ export default {
     box-sizing: border-box;
     overflow: hidden;
     overflow-y: auto;
+    &.practiceBoxStrock {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 0px;
+    }
   }
   .closeBox {
     width: 100%;
@@ -203,7 +220,7 @@ export default {
   }
   min-width: 304px;
   max-width: 560px;
-//   min-height: 360px;
+  //   min-height: 360px;
   background: #ffffff;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
@@ -215,15 +232,15 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    .content-voices{
-        width: 24px;
+    .content-voices {
+      width: 24px;
     }
-    >span{
-        font-family: 'GB-PINYINOK-B';
-        color: #2C2C2C;
-        font-size: 20px;
-        line-height: 24px;
-        margin-right: 4px;
+    > span {
+      font-family: "GB-PINYINOK-B";
+      color: #2c2c2c;
+      font-size: 20px;
+      line-height: 24px;
+      margin-right: 4px;
     }
   }
   .bwc-Strockplay {
@@ -234,7 +251,7 @@ export default {
     height: 128px;
     margin: 0 auto;
     margin-bottom: 16px;
-    border: 2px solid #DE4444;
+    border: 2px solid #de4444;
     border-radius: 8px;
     box-sizing: border-box;
     overflow: hidden;
@@ -243,30 +260,30 @@ export default {
       justify-content: center;
       align-items: center;
       position: relative;
-      .collect-icon{
-          width: 16px;
-          position: absolute;
-          right: 4px;
-          bottom: 4px;
-          cursor: pointer;
+      .collect-icon {
+        width: 16px;
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        cursor: pointer;
       }
     }
     .bwc-line {
       width: 2px;
       height: 128px;
-      background: #DE4444;
+      background: #de4444;
     }
   }
-  .bwc-tolength{
-      color: #404040;
-      font-size: 30px;
-      line-height: 1.5;
-      font-family: FZJCGFKTK;
-      text-align: center;
-      border: 2px solid #DE4444;
-      border-radius: 8px;
-      padding: 40px 0;
-      margin: 0 0 16px 0;
+  .bwc-tolength {
+    color: #404040;
+    font-size: 30px;
+    line-height: 1.5;
+    font-family: FZJCGFKTK;
+    text-align: center;
+    border: 2px solid #de4444;
+    border-radius: 8px;
+    padding: 40px 0;
+    margin: 0 0 16px 0;
   }
   .bwc-word-en {
     font-style: normal;
@@ -292,7 +309,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     > button {
-    //   width: 128px;
+      //   width: 128px;
       flex: 1;
       height: 40px;
       display: flex;
@@ -306,7 +323,7 @@ export default {
       cursor: pointer;
       border: 1px solid rgba(0, 0, 0, 0.1);
       font-size: 16px;
-      &.bwc-btn2{
+      &.bwc-btn2 {
         margin-left: 8px;
       }
       > img {
@@ -315,7 +332,6 @@ export default {
         margin-right: 4px;
       }
     }
-    
   }
 }
 </style>

src/components/Adult/preview/components/Wordintp.vue

@@ -6,16 +6,13 @@
       <i class="el-icon-close" @click="changeIntpShow(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
-        <span v-if="word.detail.pinyin">{{word.detail.pinyin}}</span>
-      <Audio
-        :fontSize="20"
-        :mp3="mp3Url ? mp3Url : ''"
-      />
+      <span v-if="word.detail.pinyin">{{ word.detail.pinyin }}</span>
+      <Audio :fontSize="20" :mp3="mp3Url ? mp3Url : ''" />
     </div>
     <div
       class="bwc-Strockplay"
       :style="{ width: word.detail.new_word.length * 126 + 8 + 'px' }"
-      v-if="word.detail.new_word.length<5"
+      v-if="word.detail.new_word.length < 5"
     >
       <div
         :key="conindex"
@@ -28,10 +25,17 @@
           :targetDiv="'bwcIntp' + conItem + conindex"
           :wordNum="word.detail.new_word.length"
         />
-        <div class="bwc-line" v-if="conindex < word.detail.new_word.length - 1"></div>
+        <div
+          class="bwc-line"
+          v-if="conindex < word.detail.new_word.length - 1"
+        ></div>
       </div>
     </div>
-    <p v-else class="bwc-tolength"><span v-for="(item,index) in word.detail.new_word" :key="index">{{item}}</span></p>
+    <p v-else class="bwc-tolength">
+      <span v-for="(item, index) in word.detail.new_word" :key="index">{{
+        item
+      }}</span>
+    </p>
     <el-menu
       :default-active="activeIndex"
       class="el-menu-demo"
@@ -46,35 +50,53 @@
       <div class="bwc-intp">
         <!-- 基本释义 -->
         <h1>基本释义</h1>
-        <span v-if="word.detail.pinyin" class="pinyin">{{word.detail.pinyin}}</span>
-        <p v-for="(itemss,indexss) in paraphrase" :key="indexss" class="paraphrase">
-            {{itemss['@value']}}
+        <span v-if="word.detail.pinyin" class="pinyin">{{
+          word.detail.pinyin
+        }}</span>
+        <p
+          v-for="(itemss, indexss) in paraphrase"
+          :key="indexss"
+          class="paraphrase"
+        >
+          {{ itemss["@value"] }}
         </p>
         <hr />
       </div>
     </template>
     <template v-if="activeIndex == '2'">
       <div class="bwc-intp">
-        <h1 v-if="synonymList.length>0">近义词</h1>
+        <h1 v-if="synonymList.length > 0">近义词</h1>
         <ul class="synonym">
-            <li v-for="(itemss,indexss) in synonymList" :key="indexss" class="paraphrase">
-                {{itemss['@value']}}
-            </li>
+          <li
+            v-for="(itemss, indexss) in synonymList"
+            :key="indexss"
+            class="paraphrase"
+          >
+            {{ itemss["@value"] }}
+          </li>
         </ul>
-        <h1 v-if="antonymList.length>0">反义词</h1>
+        <h1 v-if="antonymList.length > 0">反义词</h1>
         <ul class="synonym">
-            <li v-for="(itemss,indexss) in antonymList" :key="indexss" class="paraphrase">
-                {{itemss['@value']}}
-            </li>
+          <li
+            v-for="(itemss, indexss) in antonymList"
+            :key="indexss"
+            class="paraphrase"
+          >
+            {{ itemss["@value"] }}
+          </li>
         </ul>
       </div>
     </template>
     <template v-if="activeIndex == '3'">
       <div class="bwc-intp">
         <ul class="synonym">
-            <li v-for="(itemss,indexss) in termsList" :key="indexss" class="paraphrase">
-                {{itemss['@value']}}
-            </li>
+          <li
+            v-for="(itemss, indexss) in termsList"
+            :key="indexss"
+            class="paraphrase"
+          >
+            {{ itemss["@value"] }}
+          </li>
         </ul>
       </div>
     </template>
@@ -98,234 +120,237 @@ export default {
       isPraShow: false,
       curData: null,
       activeIndex: "1",
-      mp3Url:'', // 音频
-      paraphrase:[], // 释义
-      synonymList:[], // 近义词
-      antonymList:[], // 反义词
-      termsList:[], // 组词
+      mp3Url: "", // 音频
+      paraphrase: [], // 释义
+      synonymList: [], // 近义词
+      antonymList: [], // 反义词
+      termsList: [], // 组词
       dataDetail: [
-            {
-                "request":{
-                    "query":"生",
-                    "queryType":"entity"
-                },
-                "response":{
-                    "voice":"这个字读: shēng，一(yi1)声，诗(shi1)鞥(eng1)，生(sheng1)，意思是：1、生育；出生。 2、生长。 ",
-                    "sourceUrl":"https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2",
-                    "answer":[
-                        "生"
+        {
+          request: {
+            query: "生",
+            queryType: "entity",
+          },
+          response: {
+            voice:
+              "这个字读: shēng，一(yi1)声，诗(shi1)鞥(eng1)，生(sheng1)，意思是：1、生育；出生。 2、生长。 ",
+            sourceUrl:
+              "https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2",
+            answer: ["生"],
+            sourceName: "百度汉语",
+            title: "生",
+            entity: [
+              {
+                "@type": ["word"],
+                name: "生",
+                attrs: [
+                  {
+                    objects: [
+                      {
+                        "@value":
+                          "http://t10.baidu.com/it/u=1615089267,1656681114&fm=58&s=6BAC3062C6E167A91D9015D70300A0A0",
+                      },
                     ],
-                    "sourceName":"百度汉语",
-                    "title":"生",
-                    "entity":[
-                        {
-                            "@type":[
-                                "word"
-                            ],
-                            "name":"生",
-                            "attrs":[
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"http://t10.baidu.com/it/u=1615089267,1656681114&fm=58&s=6BAC3062C6E167A91D9015D70300A0A0"
-                                        }
-                                    ],
-                                    "label":"图片",
-                                    "type":"simple",
-                                    "key":"image"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2"
-                                        }
-                                    ],
-                                    "label":"详情页",
-                                    "type":"simple",
-                                    "key":"url"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"熟"
-                                        },
-                                        {
-                                            "@value":"死"
-                                        },
-                                        {
-                                            "@value":"师"
-                                        },
-                                        {
-                                            "@value":"卒"
-                                        }
-                                    ],
-                                    "label":"反义词",
-                                    "type":"simple",
-                                    "key":"antonym"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"1.生育；出生。 2.生长。 3.生存；活（跟“死”相对）。 4.生计。 5.生命。 6.生平。 7.具有生命力的；活的。 8.产生；发生。 9.使柴、煤等燃烧。 10.姓。11.果实没有成熟（跟“熟”相对，下12.—13.同）。 14.（食物）没有煮过或煮得不够的。 15.没有进一步加工或炼过的。 16.生疏。 17.生硬；勉强。 18.很（用在少数表示感情、感觉的词的前面）。 19.某些指人的名词后缀。 20.某些副词的后缀，如“好生、怎生”等。"
-                                        }
-                                    ],
-                                    "label":"释义",
-                                    "type":"simple",
-                                    "key":"definition"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"https://hanyu-word-pinyin-short.cdn.bcebos.com/sheng1.mp3"
-                                        }
-                                    ],
-                                    "label":"读音",
-                                    "type":"simple",
-                                    "key":"pronunciation"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"生"
-                                        }
-                                    ],
-                                    "label":"部首",
-                                    "type":"simple",
-                                    "key":"radicals"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"[shēng]"
-                                        }
-                                    ],
-                                    "label":"拼音",
-                                    "type":"simple",
-                                    "key":"spell"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"5"
-                                        }
-                                    ],
-                                    "label":"笔画",
-                                    "type":"simple",
-                                    "key":"stroke_count"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"撇、横、横、竖、横"
-                                        }
-                                    ],
-                                    "label":"笔顺",
-                                    "type":"simple",
-                                    "key":"stroke_order"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"http://appcdn.fanyi.baidu.com/zhdict/gif/b78128322d51c43cbaf2701d467822446.gif"
-                                        }
-                                    ],
-                                    "label":"笔顺动画",
-                                    "type":"simple",
-                                    "key":"stroke_order_gif"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"单一结构"
-                                        }
-                                    ],
-                                    "label":"字形结构",
-                                    "type":"simple",
-                                    "key":"struct_type"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"生命"
-                                        },
-                                        {
-                                            "@value":"五行相生"
-                                        },
-                                        {
-                                            "@value":"生活"
-                                        },
-                                        {
-                                            "@value":"大学生"
-                                        },
-                                        {
-                                            "@value":"诞生"
-                                        },
-                                        {
-                                            "@value":"生肖"
-                                        },
-                                        {
-                                            "@value":"油然而生"
-                                        },
-                                        {
-                                            "@value":"舍生取义"
-                                        },
-                                        {
-                                            "@value":"栩栩如生"
-                                        },
-                                        {
-                                            "@value":"芸芸众生"
-                                        },
-                                        {
-                                            "@value":"生意"
-                                        },
-                                        {
-                                            "@value":"生机盎然"
-                                        },
-                                        {
-                                            "@value":"生气"
-                                        },
-                                        {
-                                            "@value":"妙笔生花"
-                                        },
-                                        {
-                                            "@value":"浮生"
-                                        },
-                                        {
-                                            "@value":"陌生"
-                                        },
-                                        {
-                                            "@value":"衍生"
-                                        },
-                                        {
-                                            "@value":"生机勃勃"
-                                        },
-                                        {
-                                            "@value":"生意盎然"
-                                        },
-                                        {
-                                            "@value":"终生"
-                                        }
-                                    ],
-                                    "label":"组词",
-                                    "type":"simple",
-                                    "key":"terms"
-                                },
-                                {
-                                    "objects":[
-                                        {
-                                            "@value":"TGD"
-                                        }
-                                    ],
-                                    "label":"五笔",
-                                    "type":"simple",
-                                    "key":"wubi"
-                                }
-                            ]
-                        }
-                    ]
-                }
-            }
-        ]
+                    label: "图片",
+                    type: "simple",
+                    key: "image",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value":
+                          "https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2",
+                      },
+                    ],
+                    label: "详情页",
+                    type: "simple",
+                    key: "url",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "熟",
+                      },
+                      {
+                        "@value": "死",
+                      },
+                      {
+                        "@value": "师",
+                      },
+                      {
+                        "@value": "卒",
+                      },
+                    ],
+                    label: "反义词",
+                    type: "simple",
+                    key: "antonym",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value":
+                          "1.生育；出生。 2.生长。 3.生存；活（跟“死”相对）。 4.生计。 5.生命。 6.生平。 7.具有生命力的；活的。 8.产生；发生。 9.使柴、煤等燃烧。 10.姓。11.果实没有成熟（跟“熟”相对，下12.—13.同）。 14.（食物）没有煮过或煮得不够的。 15.没有进一步加工或炼过的。 16.生疏。 17.生硬；勉强。 18.很（用在少数表示感情、感觉的词的前面）。 19.某些指人的名词后缀。 20.某些副词的后缀，如“好生、怎生”等。",
+                      },
+                    ],
+                    label: "释义",
+                    type: "simple",
+                    key: "definition",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value":
+                          "https://hanyu-word-pinyin-short.cdn.bcebos.com/sheng1.mp3",
+                      },
+                    ],
+                    label: "读音",
+                    type: "simple",
+                    key: "pronunciation",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "生",
+                      },
+                    ],
+                    label: "部首",
+                    type: "simple",
+                    key: "radicals",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "[shēng]",
+                      },
+                    ],
+                    label: "拼音",
+                    type: "simple",
+                    key: "spell",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "5",
+                      },
+                    ],
+                    label: "笔画",
+                    type: "simple",
+                    key: "stroke_count",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "撇、横、横、竖、横",
+                      },
+                    ],
+                    label: "笔顺",
+                    type: "simple",
+                    key: "stroke_order",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value":
+                          "http://appcdn.fanyi.baidu.com/zhdict/gif/b78128322d51c43cbaf2701d467822446.gif",
+                      },
+                    ],
+                    label: "笔顺动画",
+                    type: "simple",
+                    key: "stroke_order_gif",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "单一结构",
+                      },
+                    ],
+                    label: "字形结构",
+                    type: "simple",
+                    key: "struct_type",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "生命",
+                      },
+                      {
+                        "@value": "五行相生",
+                      },
+                      {
+                        "@value": "生活",
+                      },
+                      {
+                        "@value": "大学生",
+                      },
+                      {
+                        "@value": "诞生",
+                      },
+                      {
+                        "@value": "生肖",
+                      },
+                      {
+                        "@value": "油然而生",
+                      },
+                      {
+                        "@value": "舍生取义",
+                      },
+                      {
+                        "@value": "栩栩如生",
+                      },
+                      {
+                        "@value": "芸芸众生",
+                      },
+                      {
+                        "@value": "生意",
+                      },
+                      {
+                        "@value": "生机盎然",
+                      },
+                      {
+                        "@value": "生气",
+                      },
+                      {
+                        "@value": "妙笔生花",
+                      },
+                      {
+                        "@value": "浮生",
+                      },
+                      {
+                        "@value": "陌生",
+                      },
+                      {
+                        "@value": "衍生",
+                      },
+                      {
+                        "@value": "生机勃勃",
+                      },
+                      {
+                        "@value": "生意盎然",
+                      },
+                      {
+                        "@value": "终生",
+                      },
+                    ],
+                    label: "组词",
+                    type: "simple",
+                    key: "terms",
+                  },
+                  {
+                    objects: [
+                      {
+                        "@value": "TGD",
+                      },
+                    ],
+                    label: "五笔",
+                    type: "simple",
+                    key: "wubi",
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      ],
     };
   },
   computed: {},
@@ -347,50 +372,51 @@ export default {
       this.isPraShow = false;
     },
     handleSelect(val) {
-        this.activeIndex = val
+      this.activeIndex = val;
     },
-    getChineseInfo(){
-        let _this = this
-        let data = {
-            query: this.word.detail.new_word,
-            //  query: "开心",
-        };
-        debugger
-        getHZChineseInfo(data).then((res) => {
-            _this.dataDetail = res.data.result
-            _this.handleChineseDetail()
-        });
+    getChineseInfo() {
+      let _this = this;
+      let data = {
+        query: this.word.detail.new_word,
+        //  query: "开心",
+      };
+      debugger;
+      getHZChineseInfo(data).then((res) => {
+        _this.dataDetail = res.data.result;
+        _this.handleChineseDetail();
+      });
     },
     // 处理数据
-    handleChineseDetail(){
-        let _this = this
-        _this.dataDetail.forEach(item=>{
-            if(item.request.queryType=='entity'){
-                // 读音
-                item.response.entity.forEach(items=>{
-                    items.attrs.forEach(itemss=>{
-                        if(itemss.key=="pronunciation"){
-                            // 音频
-                             _this.mp3Url = itemss.objects[0]['@value']?itemss.objects[0]['@value']:''
-                        }else if(itemss.key=="definition"){
-                            // 释义
-                             _this.paraphrase = itemss.objects
-                        }else if(itemss.key=="synonym"){
-                            // 近义词
-                             _this.synonymList = itemss.objects
-                        }else if(itemss.key=="antonym"){
-                            // 反义词
-                             _this.antonymList = itemss.objects
-                        }else if(itemss.key=="terms"){
-                            // 反义词
-                             _this.termsList = itemss.objects
-                        }
-                    })
-                })
-               
-            }
-        })
-    }
+    handleChineseDetail() {
+      let _this = this;
+      _this.dataDetail.forEach((item) => {
+        if (item.request.queryType == "entity") {
+          // 读音
+          item.response.entity.forEach((items) => {
+            items.attrs.forEach((itemss) => {
+              if (itemss.key == "pronunciation") {
+                // 音频
+                _this.mp3Url = itemss.objects[0]["@value"]
+                  ? itemss.objects[0]["@value"]
+                  : "";
+              } else if (itemss.key == "definition") {
+                // 释义
+                _this.paraphrase = itemss.objects;
+              } else if (itemss.key == "synonym") {
+                // 近义词
+                _this.synonymList = itemss.objects;
+              } else if (itemss.key == "antonym") {
+                // 反义词
+                _this.antonymList = itemss.objects;
+              } else if (itemss.key == "terms") {
+                // 反义词
+                _this.termsList = itemss.objects;
+              }
+            });
+          });
+        }
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -398,8 +424,8 @@ export default {
   mounted() {
     let _this = this;
     console.log(this.word);
-    //   this.getChineseInfo()
-    _this.handleChineseDetail()
+    this.getChineseInfo();
+    // _this.handleChineseDetail();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -414,59 +440,59 @@ export default {
 //@import url(); 引入公共css类
 .wordIntp {
   width: 600px;
-//   height: 100vh;
+  //   height: 100vh;
   overflow: hidden;
   overflow-y: auto;
   margin: 0 auto;
   position: relative;
   .bwc-intp {
-      padding: 16px 0;
-      h1{
-          color: #000000;
-          font-size: 20px;
-          line-height: 150%;
-          font-weight: normal;
-          margin: 8px 0 8px 0;
-      }
-      .pinyin{
-          color: #DE4444;
-          font-size: 24px;
-          line-height: 36px;
-          margin-bottom: 8px;
-          font-family: 'GB-PINYINOK-B';
-          display: block;
-      }
-      .paraphrase{
-          margin-bottom: 8px;
-          margin-top: 0;
-          color: #000000;
-          font-size: 16px;
-          line-height: 150%;
-      }
-      hr{
-          margin: 16px 0 0 0;
-          background: rgba($color: #000000, $alpha: 0.15);
-          height: 1px;
-          border: none;
-      }
-      ul.synonym{
-          display: flex;
-          flex-flow: wrap;
-          margin-left: -4px;
-          padding: 4px 0;
-          li{
-              padding: 4px 8px;
-              background: #FFFFFF;
-              border: 1px solid rgba(0, 0, 0, 0.15);
-              border-radius: 4px;
-              margin: 4px;
-              font-size: 16px;
-              line-height: 150%;
-              color: #000000;
-              text-align: center;
-              min-width: 127px;
-          }
+    padding: 16px 0;
+    h1 {
+      color: #000000;
+      font-size: 20px;
+      line-height: 150%;
+      font-weight: normal;
+      margin: 8px 0 8px 0;
+    }
+    .pinyin {
+      color: #de4444;
+      font-size: 24px;
+      line-height: 36px;
+      margin-bottom: 8px;
+      font-family: "GB-PINYINOK-B";
+      display: block;
+    }
+    .paraphrase {
+      margin-bottom: 8px;
+      margin-top: 0;
+      color: #000000;
+      font-size: 16px;
+      line-height: 150%;
+    }
+    hr {
+      margin: 16px 0 0 0;
+      background: rgba($color: #000000, $alpha: 0.15);
+      height: 1px;
+      border: none;
+    }
+    ul.synonym {
+      display: flex;
+      flex-flow: wrap;
+      margin-left: -4px;
+      padding: 4px 0;
+      li {
+        padding: 4px 8px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 4px;
+        margin: 4px;
+        font-size: 16px;
+        line-height: 150%;
+        color: #000000;
+        text-align: center;
+        min-width: 127px;
       }
+    }
   }
   .practiceBox {
     position: fixed;
@@ -490,15 +516,15 @@ export default {
     top: 0;
     padding: 12px;
     > i {
-        font-size: 16px;
-        color:#000000;
+      font-size: 16px;
+      color: #000000;
       cursor: pointer;
     }
-    span{
-        color: #000000;
-        opacity: 0.2;
-        font-size: 14px;
-        line-height: 130%;
+    span {
+      color: #000000;
+      opacity: 0.2;
+      font-size: 14px;
+      line-height: 130%;
     }
   }
   min-width: 312px;
@@ -514,15 +540,15 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    .content-voices{
-        width: 24px;
+    .content-voices {
+      width: 24px;
     }
-    >span{
-        font-family: 'GB-PINYINOK-B';
-        color: #2C2C2C;
-        font-size: 20px;
-        line-height: 24px;
-        margin-right: 4px;
+    > span {
+      font-family: "GB-PINYINOK-B";
+      color: #2c2c2c;
+      font-size: 20px;
+      line-height: 24px;
+      margin-right: 4px;
     }
   }
   .bwc-Strockplay {
@@ -533,7 +559,7 @@ export default {
     height: 130px;
     margin: 0 auto;
     margin-bottom: 6px;
-    border: 2px solid #DE4444;
+    border: 2px solid #de4444;
     border-radius: 8px;
     box-sizing: border-box;
     overflow: hidden;
@@ -542,30 +568,30 @@ export default {
       justify-content: center;
       align-items: center;
       position: relative;
-      .collect-icon{
-          width: 16px;
-          position: absolute;
-          right: 4px;
-          bottom: 4px;
-          cursor: pointer;
+      .collect-icon {
+        width: 16px;
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        cursor: pointer;
       }
     }
     .bwc-line {
       width: 2px;
       height: 126px;
-      background: #DE4444;
+      background: #de4444;
     }
   }
-  .bwc-tolength{
-      color: #404040;
-      font-size: 30px;
-      line-height: 1.5;
-      font-family: FZJCGFKTK;
-      text-align: center;
-      border: 2px solid #DE4444;
-      border-radius: 8px;
-      padding: 40px 0;
-      margin: 0 0 16px 0;
+  .bwc-tolength {
+    color: #404040;
+    font-size: 30px;
+    line-height: 1.5;
+    font-family: FZJCGFKTK;
+    text-align: center;
+    border: 2px solid #de4444;
+    border-radius: 8px;
+    padding: 40px 0;
+    margin: 0 0 16px 0;
   }
   .bwc-word-en {
     font-style: normal;
@@ -613,20 +639,20 @@ export default {
 }
 </style>
 <style lang="scss">
-.wordIntp{
-    .el-menu--horizontal > .el-menu-item {
-        width: 33.33%;
-        text-align: center;
-        color: #000000;
-        font-size: 18px;
-    }
-    .el-menu.el-menu--horizontal{
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    .el-menu--horizontal>.el-menu-item.is-active{
-        color: #DE4444;
-        font-weight: bold;
-        border-bottom: 2px solid #DE4444;
-    }
+.wordIntp {
+  .el-menu--horizontal > .el-menu-item {
+    width: 33.33%;
+    text-align: center;
+    color: #000000;
+    font-size: 18px;
+  }
+  .el-menu.el-menu--horizontal {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .el-menu--horizontal > .el-menu-item.is-active {
+    color: #de4444;
+    font-weight: bold;
+    border-bottom: 2px solid #de4444;
+  }
 }
 </style>

src/views/adultInput.vue

@@ -177,7 +177,10 @@
                     <template
                       v-if="
                         topicIitem.type == 'recordHZ_inputPY_chs' ||
-                        topicIitem.type == 'inputItem_chs'
+                        topicIitem.type == 'inputItem_chs' ||
+                        topicIitem.type == 'sentence_input' ||
+                        topicIitem.type == 'sentence_judge' ||
+                        topicIitem.type == 'sentence_record'
                       "
                     >
                       <template v-if="topicIitem.is_edit">
@@ -345,7 +348,7 @@ import UploadControlView from "@/components/Adult/preview/UploadControlView.vue"
 
 import Preview from "@/components/Adult/Preview.vue";
 import fn from "@/components/Adult/common/data.js";
-import { getContent } from "@/api/ajax";
+import { getContent, getStaticContent } from "@/api/ajax";
 
 export default {
   components: {
@@ -596,7 +599,6 @@ export default {
         this.$message.warning("每列只能添加一个模板");
       } else {
         console.log("不存在");
-        this.module_type = item.type;
         this.$set(
           this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
             .table_list[this.RowIndex][this.LineIndex],
@@ -633,34 +635,19 @@ export default {
         this.$message.warning("请先选择添加模板的位置");
         return;
       }
-      let cur_fn_data = JSON.parse(
-        JSON.stringify(this.fn_data[itemIndex].data_structure)
-      );
+
       if (
         this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
           .table_list[this.RowIndex][this.LineIndex].data
       ) {
         this.$message.warning("每列只能添加一个模板");
       } else {
-        cur_fn_data.ChildType = child.type;
-        if (cur_fn_data.fn_list) {
-          cur_fn_data.fn_list.forEach((gn) => {
-            if (gn.type == child.type && gn.type != "image_record") {
-              gn.isFn = true;
-            }
-            if (
-              child.type == "image_input_three" ||
-              child.type == "image_dobleinput" ||
-              child.type == "image_wordInput" ||
-              child.type == "image_gdcy"
-            ) {
-              if (gn.type == "image_input") {
-                gn.isFn = true;
-              }
-            }
-          });
-        }
-
+        this.$set(
+          this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
+            .table_list[this.RowIndex][this.LineIndex],
+          "type",
+          child.type
+        );
         this.$set(
           this.question_list[this.tabIndex].cur_fn_data[this.TopicIndex]
             .table_list[this.RowIndex][this.LineIndex],
@@ -699,6 +686,7 @@ export default {
     },
     onSave() {
       let question_list_str = JSON.stringify(this.question_list);
+      console.log(this.question_list);
       localStorage.setItem("question_list", question_list_str);
       let result = this.saveNewwordAndSentences();
       this.$message.success("保存成功");
@@ -710,12 +698,60 @@ export default {
         sentence_list: result.sentence_list,
       };
       getContent(MethodName, data)
-        .then((res) => {})
+        .then((res) => {
+          this.$message.success("保存成功！");
+        })
         .catch((error) => {});
     },
-    onPreview() {
-      this.previewVisible = true;
-      this.context = this.question_list;
+    async onPreview() {
+      let _this = this;
+      let question_data = null;
+      if (_this.question_list) {
+        debugger;
+        const question2 = JSON.parse(JSON.stringify(_this.question_list));
+        question_data = await _this.getFileUrl_preview(question2);
+        _this.previewVisible = true;
+        _this.context = question_data;
+        console.log("预览数据");
+        console.log(this.question_list);
+      } else {
+        _this.$message.warning("还没有录入数据");
+      }
+    },
+    getFileUrl_preview(question) {
+      let questionStr = JSON.stringify(question);
+
+      const reg = /\[FID##(.*?)##FID\]/g;
+      let regConArr = [];
+      if (reg.test(questionStr)) {
+        regConArr = questionStr.match(reg);
+      }
+      if (regConArr.length > 0) {
+        regConArr = regConArr.map((item) => {
+          item = item.replace("[FID##", "").replace("##FID]", "");
+          return item;
+        });
+      }
+      return new Promise((resolve, reject) => {
+        const MethodName = "file_store_manager-GetFileURLMap";
+        const data = {
+          file_id_list: regConArr,
+        };
+        getStaticContent(MethodName, data).then((res) => {
+          const backData = res.url_map;
+          for (const key in backData) {
+            const url = backData[key];
+            if (questionStr.indexOf(key) > -1) {
+              const d = `\\[FID##${key}##FID\\]`;
+              const regD = new RegExp(d, "g");
+              questionStr = questionStr.replace(regD, url);
+            }
+          }
+          const question3 = JSON.parse(questionStr);
+
+          resolve(question3);
+        });
+      });
     },
     onSure(curItem) {
       this.TopicIndex = null;