Merge branch 'gcj'

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

@@ -345,7 +345,7 @@ export default {
         "⑲",
         "⑳",
       ],
-      newWords: ["鱼", "辩礼义"],
+      newWords: [],
       top: 0,
       left: 0,
       articleImg: {}, // 文章图片

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

@@ -584,7 +584,6 @@ export default {
       _this.clientY = e.clientY;
       let left = e.clientX;
       let width = 642;
-      debugger;
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
       } else {

src/components/Adult/preview/NewWordShow.vue

@@ -3,8 +3,15 @@
   <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 ">
+      <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>
@@ -20,7 +27,9 @@
                 <Strockplayredline
                   :Book_text="conItem"
                   :playStorkes="true"
-                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex + indexStr"
+                  :targetDiv="
+                    'bwcHanziIntp' + index + conItem + conindex + indexStr
+                  "
                 />
                 <div
                   class="bwc-line"
@@ -108,16 +117,16 @@ export default {
       const MethodName = "tool-ChineseSCConvert";
       const data = {
         text: words,
-        swap_mode: 'S-C'
+        swap_mode: "S-C",
       };
-      let TChinese = await getContentFile(MethodName,data)
+      let TChinese = await getContentFile(MethodName, data);
       this.curData = {
         stem: [
           {
             con: words ? words : "",
             pinyin: pinyin && pinyin ? pinyin : "",
             mp3_url: "",
-            TChinese: TChinese.text
+            TChinese: TChinese.text,
           },
         ],
       };
@@ -237,7 +246,6 @@ export default {
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.19);
-    padding-top: 32px;
     box-sizing: border-box;
     overflow: hidden;
     overflow-y: auto;

src/components/Adult/preview/WordPhrase.vue

@@ -105,17 +105,16 @@
         </ul>
       </div>
     </el-collapse-transition>
-    <div v-if="detailShow">
+    <div class="practiceBox" v-if="detailShow">
       <WordPhraseDetail
-        v-if="isSuccess"
         :data="data"
-        :curQue="curQue"
         :changeDetailIndex="changeDetailIndex"
         :closeWord="closeWordShow"
         :detailIndex="detailIndex"
-        :getWordLiju="getWordLiju"
         :optionRes="optionRes"
         :themeColor="themeColor"
+        :currentTreeID="currentTreeID"
+        type="newWordDetail"
       />
     </div>
   </div>
@@ -125,7 +124,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import WordPhraseDetail from "./components/WordPhraseDetail.vue";
-import { getContent } from "@/api/ajax";
+import { getHZChineseInfo } from "@/api/ajax";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
@@ -146,6 +145,7 @@ export default {
       optionRes: [],
       mp3List: [],
       isSuccess: false,
+      loading: false,
     };
   },
   //计算属性 类似于data概念
@@ -202,73 +202,24 @@ export default {
     showDetail(item) {
       this.data = null;
       this.data = item;
-      console.log(this.data);
       this.detailShow = true;
       this.detailIndex = item.sIndex;
-      this.getWordLiju(item.new_word);
-    },
-    // 获取生词的例句
-    getWordLiju(val) {
-      this.isSuccess = false;
-      console.log(this.data);
-      this.data.list1 = [];
-      this.data.list2 = [];
-      this.data.list3 = [];
-      let Mname =
-        "book-courseware_manager-GetCoursewareWordExampleSentenceList";
-      // 获取本课的 本教材的 本套的 的例句
-      getContent(Mname, {
-        courseware_id: this.currentTreeID, // 课件id
-        word: val, //生词
-        search_scope: 2, //检索范围0 本课件  1本教材 2本套
-        is_contain_word_variants: false,
-      }).then((res) => {
-        this.data.list3 = res.sentence_list;
-        getContent(Mname, {
-          courseware_id: this.currentTreeID, // 课件id
-          word: val, //生词
-          search_scope: 1, //检索范围0 本课件  1本教材 2本套
-          is_contain_word_variants: false,
-        }).then((res) => {
-          this.data.list2 = res.sentence_list;
-          getContent(Mname, {
-            courseware_id: this.currentTreeID, // 课件id
-            word: val, //生词
-            search_scope: 0, //检索范围0 本课件  1本教材 2本套
-            is_contain_word_variants: false,
-          }).then((res) => {
-            this.$set(this.data, "list1", res.sentence_list);
-            this.isSuccess = true;
-          });
-        });
-      });
     },
+
     // 关闭单词详情
     closeWordShow(val) {
       this.detailShow = val;
     },
-    // 上一个单词详情
-    lasspanetail(val) {
-      this.detailIndex = val;
-      this.data = null;
-      this.data = this.optionRes[this.detailIndex];
-      this.getWordLiju(this.data.new_word);
-    },
-    // 下一个单词详情
-    nexspanetail(val) {
-      this.detailIndex = val;
-      this.data = null;
-      this.data = this.optionRes[this.detailIndex];
-      this.getWordLiju(this.data.new_word);
-    },
     changeDetailIndex(val) {
+      let _this = this;
       if (val == "last") {
-        this.detailIndex--;
+        _this.detailIndex--;
       } else {
-        this.detailIndex++;
+        _this.detailIndex++;
       }
-      this.data = null;
-      this.data = this.optionRes[this.detailIndex];
+      _this.data = null;
+      _this.data = _this.optionRes[_this.detailIndex];
+      //_this.getWordLiju(_this.data.new_word);
     },
     playNewwords() {
       let _this = this;
@@ -387,6 +338,18 @@ export default {
 .NPC-zhedie {
   width: 780px;
   margin-bottom: 16px;
+  .practiceBox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.19);
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+  }
   .NPC-word-list {
     background: #f7f7f7;
   }
@@ -448,7 +411,7 @@ export default {
         font-family: "robot";
         width: 48px;
         box-sizing: border-box;
-        text-align: right;
+        text-align: left;
       }
       .NPC-word-tab-def {
         flex: 1;

src/components/Adult/preview/components/Intp.vue

@@ -88,7 +88,7 @@ export default {
     Strockplayredline,
     Audio,
   },
-  props: ["word", "changeIntpShow", "themeColor", "show"],
+  props: ["word", "changeIntpShow", "themeColor", "show", "type"],
   data() {
     return {
       isPraShow: false,
@@ -99,232 +99,7 @@ export default {
       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: ["生"],
-            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",
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      ],
+      dataDetail: [],
     };
   },
   computed: {
@@ -349,6 +124,9 @@ export default {
     word: {
       handler: function (val, oldVal) {
         let _this = this;
+        if (_this.type == "newWordDetail") {
+          _this.getChineseInfo();
+        }
       },
       // 深度观察监听
       deep: true,
@@ -367,6 +145,7 @@ export default {
     },
     getChineseInfo() {
       let _this = this;
+
       let data = {
         query: this.word.new_word,
       };
@@ -378,6 +157,10 @@ export default {
     // 处理数据
     handleChineseDetail() {
       let _this = this;
+      _this.paraphrase = [];
+      _this.synonymList = [];
+      _this.antonymList = [];
+      _this.termsList = [];
       _this.dataDetail.forEach((item) => {
         if (item.request.queryType == "entity") {
           // 读音
@@ -385,7 +168,8 @@ export default {
             items.attrs.forEach((itemss) => {
               if (itemss.key == "pronunciation") {
                 // 音频
-                _this.mp3Url = itemss.objects[0]["@value"]
+
+                _this.word.mp3Url = itemss.objects[0]["@value"]
                   ? itemss.objects[0]["@value"]
                   : "";
               } else if (itemss.key == "definition") {
@@ -412,23 +196,24 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    console.log(_this.word);
-    // _this.getChineseInfo();
-    // _this.handleChineseDetail();
-    if (_this.word) {
-      _this.mp3Url = _this.word.mp3Url ? _this.word.mp3Url : "";
-      _this.paraphrase = _this.word.paraphrase
-        ? JSON.parse(JSON.stringify(_this.word.paraphrase))
-        : [];
-      _this.synonymList = _this.word.synonymList
-        ? JSON.parse(JSON.stringify(_this.word.synonymList))
-        : [];
-      _this.antonymList = _this.word.antonymList
-        ? JSON.parse(JSON.stringify(_this.word.antonymList))
-        : [];
-      _this.termsList = _this.word.termsList
-        ? JSON.parse(JSON.stringify(_this.word.termsList))
-        : [];
+    if (_this.type == "newWordDetail") {
+      _this.getChineseInfo();
+    } else {
+      if (_this.word) {
+        _this.mp3Url = _this.word.mp3Url ? _this.word.mp3Url : "";
+        _this.paraphrase = _this.word.paraphrase
+          ? JSON.parse(JSON.stringify(_this.word.paraphrase))
+          : [];
+        _this.synonymList = _this.word.synonymList
+          ? JSON.parse(JSON.stringify(_this.word.synonymList))
+          : [];
+        _this.antonymList = _this.word.antonymList
+          ? JSON.parse(JSON.stringify(_this.word.antonymList))
+          : [];
+        _this.termsList = _this.word.termsList
+          ? JSON.parse(JSON.stringify(_this.word.termsList))
+          : [];
+      }
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -444,11 +229,12 @@ export default {
 //@import url(); 引入公共css类
 .wordIntp {
   width: 100%;
-  //   height: 100vh;
+  height: 2000px;
   overflow: hidden;
   overflow-y: auto;
   margin: 0 auto;
   position: relative;
+  margin-top: 16px !important;
   .bwc-intp {
     padding: 16px 0;
     h1 {
@@ -498,19 +284,6 @@ export default {
       }
     }
   }
-  .practiceBox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 999;
-    width: 100%;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.19);
-    padding-top: 32px;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-y: auto;
-  }
   .closeBox {
     width: 100%;
     display: flex;

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="height"
-    class="Module wordDetailChs"
+    class="wordDetailModule wordDetailChs"
     :style="{
       height: height,
       maxHeight: height,
@@ -13,19 +13,19 @@
           <div>
             <template v-if="optionRes && optionRes.length > 0">
               <img
-                src="../../../../assets/adult/sc.png"
+                src="../../../../assets/NPC/sc.png"
                 alt=""
                 v-if="!notshowNext"
               />
               <img
                 style="margin-right: 8px"
-                src="../../../../assets/adult/word-left.png"
+                src="../../../../assets/icon/Left-16-normal-Black.png"
                 alt=""
                 @click="lastDetail"
                 v-if="!notshowNext"
               />
               <img
-                src="../../../../assets/adult/word-right.png"
+                src="../../../../assets/icon/Right-16-normal-Black.png"
                 alt=""
                 @click="nextDetail"
                 v-if="!notshowNext"
@@ -33,7 +33,7 @@
             </template>
             <img
               @click="closeWordShow"
-              src="../../../../assets/adult/word-close.png"
+              src="../../../../assets/icon/Cross-16-normal-Black.png"
               alt=""
             />
           </div>
@@ -55,9 +55,10 @@
               :key="'new_word_' + conindex"
             >
               <Strockplayredline
+                :key="conItem + detailIndex + conindex"
                 :Book_text="conItem"
                 :playStorkes="true"
-                :targetDiv="'bwcHanziIntp' + detailIndex + conindex"
+                :targetDiv="'bwcHanziIntp' + conItem + detailIndex + conindex"
                 :wordNum="data.new_word.length"
                 :themeColor="themeColor"
               />
@@ -92,7 +93,7 @@
           </div>
         </div>
         <div class="zhedie-white">
-          <div v-if="data.list1.length > 0">
+          <div v-if="list1 && list1.length > 0" v-loading="loading1">
             <div class="topTitle">
               <span>本课例句</span>
               <span @click="handleChangeTab('wordShow')"
@@ -107,7 +108,7 @@
             </div>
             <el-collapse-transition>
               <div class="liju" v-show="wordShow">
-                <div v-for="(item, i) in data.list1" :key="i">
+                <div v-for="(item, i) in list1" :key="i">
                   <div>{{ i + 1 }}.</div>
                   <div>
                     <p v-html="item.res"></p>
@@ -119,7 +120,7 @@
               </div>
             </el-collapse-transition>
           </div>
-          <div v-if="data.list2.length > 0">
+          <div v-if="list2 && list2.length > 0" v-loading="loading2">
             <div class="topTitle">
               <span>本书例句</span>
               <span @click="handleChangeTab('wordShow2')"
@@ -134,8 +135,8 @@
             </div>
             <el-collapse-transition>
               <div class="liju" v-show="wordShow2">
-                <div v-for="(item, i) in data.list2" :key="i">
-                  <div>{{ i + 1 }}.</div>
+                <div v-for="(item, i) in list2" :key="i">
+                  <div>{{ list1.length + i + 1 }}.</div>
                   <div>
                     <p v-html="item.res"></p>
                     <p class="p2">
@@ -146,7 +147,7 @@
               </div>
             </el-collapse-transition>
           </div>
-          <div v-if="data.list3.length > 0">
+          <div v-if="list3 && list3.length > 0" v-loading="loading3">
             <div class="topTitle">
               <span>本套教材例句</span>
               <span @click="handleChangeTab('wordShow3')"
@@ -160,8 +161,8 @@
             </div>
             <el-collapse-transition>
               <div class="liju" v-if="wordShow3">
-                <div v-for="(item, i) in data.list3" :key="i">
-                  <div>{{ data.list3.length + i + 1 }}.</div>
+                <div v-for="(item, i) in list3" :key="i">
+                  <div>{{ list1.length + list2.length + i + 1 }}.</div>
                   <div>
                     <p>{{ item.sentence }}</p>
                     <p class="p2">
@@ -217,9 +218,7 @@
           </div>
         </div>
       </div>
-      <div class="module-bottom">
-        <Intp :word="data" :themeColor="themeColor" />
-      </div>
+      <Intp :word="data" :themeColor="themeColor" :type="type" />
     </div>
   </div>
 </template>
@@ -228,6 +227,7 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Audio from "./AudioRed.vue";
 import Intp from "./Intp.vue";
+import { getContent } from "@/api/ajax";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -238,7 +238,6 @@ export default {
   },
   props: [
     "data",
-    "curQue",
     "changeDetailIndex",
     "closeWord",
     "detailIndex",
@@ -246,6 +245,9 @@ export default {
     "getWordLiju",
     "optionRes",
     "themeColor",
+    "isSuccess",
+    "currentTreeID",
+    "type",
   ],
   data() {
     //这里存放数据
@@ -256,8 +258,13 @@ export default {
       wordShow2: true,
       wordShow3: true,
       list1: [],
+      list2: [],
+      list3: [],
       isShow: false,
       old_word: "",
+      loading1: false,
+      loading2: false,
+      loading3: false,
     };
   },
   //计算属性 类似于data概念
@@ -292,20 +299,63 @@ export default {
     },
     // 下一个单词详情
     nextDetail() {
-      if (this.detailIndex == this.optionRes.length - 1) {
+      let _this = this;
+      if (_this.detailIndex == _this.optionRes.length - 1) {
         this.$message.warning("当前已经是最后一个了 ");
         return;
       }
-      if (this.old_word != this.data.new_word) {
-        this.isShow = false;
-        setTimeout(() => {
-          this.changeDetailIndex("next");
-          this.getWordLiju();
-        }, 50);
-      }
+      _this.changeDetailIndex("next");
+    },
+    viewIntp() {
+      this.loading1 = true;
+      this.loading2 = true;
+      this.loading3 = true;
+      let Mname =
+        "book-courseware_manager-GetCoursewareWordExampleSentenceList";
+      // 获取本课的 本教材的 本套的 的例句
+      getContent(Mname, {
+        courseware_id: this.currentTreeID, // 课件id
+        word: this.data.new_word, //生词
+        search_scope: 0, //检索范围0 本课件  1本教材 2本套
+        is_contain_word_variants: false,
+      })
+        .then((res) => {
+          this.loading1 = false;
+          this.list1 = this.handleExample(res.sentence_list);
+          console.log(this.list1);
+          getContent(Mname, {
+            courseware_id: this.currentTreeID, // 课件id
+            word: this.data.new_word, //生词
+            search_scope: 1, //检索范围0 本课件  1本教材 2本套
+            is_contain_word_variants: false,
+          })
+            .then((res) => {
+              this.loading2 = false;
+              this.list2 = this.handleExample(res.sentence_list);
+              getContent(Mname, {
+                courseware_id: this.currentTreeID, // 课件id
+                word: this.data.new_word, //生词
+                search_scope: 2, //检索范围0 本课件  1本教材 2本套
+                is_contain_word_variants: false,
+              })
+                .then((res) => {
+                  this.loading3 = false;
+                  this.list3 = this.handleExample(res.sentence_list);
+                })
+                .catch((err) => {
+                  this.loading3 = false;
+                });
+            })
+            .catch((err) => {
+              this.loading2 = false;
+            });
+        })
+        .catch((err) => {
+          this.loading1 = false;
+        });
     },
     handleExample(list) {
-      list.map((item, index) => {
+      list = list.map((item, index) => {
         let b = item.begin_position;
         let e = item.end_position;
         let sent = item.sentence;
@@ -317,21 +367,12 @@ export default {
         item.res = res;
         return item;
       });
+      return list;
     },
+
     initData() {
-      // if (this.curQue) {
-      //   this.isShow = true;
-      if (this.data.list1 && this.data.list1.length > 0) {
-        this.handleExample(this.data.list1);
-      }
-      if (this.data.list2 && this.data.list2.length > 0) {
-        this.handleExample(this.data.list2);
-      }
-      if (this.data.list3 && this.data.list3.length > 0) {
-        this.handleExample(this.data.list3);
-      }
-      this.old_word = this.optionRes ? this.optionRes.new_word : "";
-      //}
+      console.log(this.data);
+      this.viewIntp();
       let Fathernode = document.getElementsByClassName(
         "NPC-Big-Book-preview"
       )[0];
@@ -369,30 +410,28 @@ export default {
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.Module {
-  position: fixed;
+.wordDetailModule {
   width: 100%;
-  left: 0;
-  top: 0;
   z-index: 999;
   background: rgba(0, 0, 0, 0.33);
   overflow-y: scroll;
+
   .module-inner {
-    position: fixed;
-    top: 0%;
-    left: 50%;
-    margin-left: -394px;
+    padding: 30px 0;
     > div {
       width: 788px;
-      margin-left: 36px;
+      margin: 0 auto;
       background: #ffffff;
       box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
       border-radius: 8px;
       padding: 16px 32px 40px 32px;
       .operation {
-        height: 24px;
+        height: 16px;
+        margin-bottom: 8px;
         div {
-          float: right;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
           > :nth-child(1) {
             margin-right: 24px;
           }
@@ -405,8 +444,8 @@ export default {
         }
 
         img {
-          width: 24px;
-          height: 24px;
+          width: 16px;
+          height: 16px;
           cursor: pointer;
         }
       }
@@ -486,8 +525,8 @@ export default {
             margin-right: 8px;
             word-break: normal;
           }
-          .content-voices{
-              width: 16px;
+          .content-voices {
+            width: 16px;
           }
         }
       }

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

@@ -122,6 +122,7 @@
     </div>
     <div class="practiceBox" v-if="isIntpShow">
       <WordPhraseDetail
+        :currentTreeID="currentTreeID"
         :closeWord="changeIntpShow"
         :data="word.detail"
         :themeColor="themeColor"
@@ -194,38 +195,7 @@ export default {
       this.isPraShow = false;
     },
     viewIntp() {
-      this.isIntpShow = false;
-      this.word.detail.list1 = [];
-      this.word.detail.list2 = [];
-      this.word.detail.list3 = [];
-      let Mname =
-        "book-courseware_manager-GetCoursewareWordExampleSentenceList";
-      // 获取本课的 本教材的 本套的 的例句
-      getContent(Mname, {
-        courseware_id: this.currentTreeID, // 课件id
-        word: this.word.detail.new_word, //生词
-        search_scope: 2, //检索范围0 本课件  1本教材 2本套
-        is_contain_word_variants: false,
-      }).then((res) => {
-        this.$set(this.word.detail, "list3", res.sentence_list);
-        getContent(Mname, {
-          courseware_id: this.currentTreeID, // 课件id
-          word: this.word.detail.new_word, //生词
-          search_scope: 1, //检索范围0 本课件  1本教材 2本套
-          is_contain_word_variants: false,
-        }).then((res) => {
-          this.$set(this.word.detail, "list2", res.sentence_list);
-          getContent(Mname, {
-            courseware_id: this.currentTreeID, // 课件id
-            word: this.word.detail.new_word, //生词
-            search_scope: 0, //检索范围0 本课件  1本教材 2本套
-            is_contain_word_variants: false,
-          }).then((res) => {
-            this.$set(this.word.detail, "list1", res.sentence_list);
-            this.isIntpShow = true;
-          });
-        });
-      });
+      this.isIntpShow = true;
     },
     changeIntpShow() {
       this.isIntpShow = false;
@@ -283,8 +253,6 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    console.log("this.word====");
-    console.log(this.word);
     if (_this.word && _this.word.detail) {
       _this.defStr =
         _this.word.detail.definition_list &&
@@ -317,7 +285,6 @@ export default {
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.19);
-    padding-top: 32px;
     box-sizing: border-box;
     overflow: hidden;
     overflow-y: auto;

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

@@ -1,722 +0,0 @@
-<!--  -->
-<template>
-  <div class="wordIntp" v-if="word">
-    <div class="closeBox">
-      <span>数据来自百度汉语</span>
-      <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 : ''"
-        :themeColor="themeColor"
-      />
-    </div>
-    <div
-      class="bwc-Strockplay"
-      :style="{ width: word.detail.new_word.length * 126 + 4 + 'px' }"
-      v-if="word.detail.new_word.length < 5"
-    >
-      <div
-        :key="conindex"
-        class="strockplay"
-        v-for="(conItem, conindex) in word.list"
-      >
-        <Strockplayredline
-          :Book_text="conItem"
-          :playStorkes="true"
-          :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>
-    </div>
-    <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"
-      mode="horizontal"
-      @select="handleSelect"
-    >
-      <el-menu-item index="1">释义</el-menu-item>
-      <el-menu-item index="2">近/反义词</el-menu-item>
-      <el-menu-item index="3">组词</el-menu-item>
-    </el-menu>
-    <template v-if="activeIndex == '1'">
-      <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"] }}
-        </p>
-        <hr />
-      </div>
-    </template>
-    <template v-if="activeIndex == '2'">
-      <div class="bwc-intp">
-        <h1 v-if="synonymList.length > 0">近义词</h1>
-        <ul class="synonym">
-          <li
-            v-for="(itemss, indexss) in synonymList"
-            :key="indexss"
-            class="paraphrase"
-          >
-            {{ itemss["@value"] }}
-          </li>
-        </ul>
-        <h1 v-if="antonymList.length > 0">反义词</h1>
-        <ul class="synonym">
-          <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>
-        </ul>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import Audio from "./AudioRed.vue";
-import Strockplayredline from "./Strockplayredline.vue";
-import { getHZChineseInfo } from "@/api/ajax";
-
-export default {
-  name: "WordIntp",
-  components: {
-    Strockplayredline,
-    Audio,
-  },
-  props: ["word", "changeIntpShow", "themeColor"],
-  data() {
-    return {
-      isPraShow: false,
-      curData: null,
-      activeIndex: "1",
-      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: ["生"],
-            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",
-                  },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    };
-  },
-  computed: {},
-  watch: {
-    word: {
-      handler: function (val, oldVal) {
-        let _this = this;
-      },
-      // 深度观察监听
-      deep: true,
-    },
-  },
-  //方法集合
-  methods: {
-    writeWord() {
-      this.isPraShow = true;
-    },
-    changePraShow() {
-      this.isPraShow = false;
-    },
-    handleSelect(val) {
-      this.activeIndex = val;
-    },
-    getChineseInfo() {
-      let _this = this;
-      let data = {
-        query: this.word.detail.new_word,
-        //  query: "开心",
-      };
-      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;
-              }
-            });
-          });
-        }
-      });
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let _this = this;
-    this.getChineseInfo();
-    // _this.handleChineseDetail();
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-.wordIntp {
-  width: 600px;
-  //   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;
-      }
-    }
-  }
-  .practiceBox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 999;
-    width: 100%;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.19);
-    padding-top: 32px;
-    box-sizing: border-box;
-    overflow: hidden;
-    overflow-y: auto;
-  }
-  .closeBox {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    position: absolute;
-    left: 0;
-    top: 0;
-    padding: 12px;
-    > i {
-      font-size: 16px;
-      color: #000000;
-      cursor: pointer;
-    }
-    span {
-      color: #000000;
-      opacity: 0.2;
-      font-size: 14px;
-      line-height: 130%;
-    }
-  }
-  min-width: 312px;
-  min-height: 360px;
-  background: #ffffff;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 8px;
-  padding: 52px 32px 32px;
-  box-sizing: border-box;
-  .bwc-top {
-    margin-bottom: 16px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .content-voices {
-      width: 24px;
-    }
-    > span {
-      font-family: "GB-PINYINOK-B";
-      color: #2c2c2c;
-      font-size: 20px;
-      line-height: 24px;
-      margin-right: 4px;
-    }
-  }
-  .bwc-Strockplay {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 130px;
-    height: 130px;
-    margin: 0 auto;
-    margin-bottom: 6px;
-    border: 2px solid #de4444;
-    border-radius: 8px;
-    box-sizing: border-box;
-    overflow: hidden;
-    .strockplay {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      .collect-icon {
-        width: 16px;
-        position: absolute;
-        right: 4px;
-        bottom: 4px;
-        cursor: pointer;
-      }
-    }
-    .bwc-line {
-      width: 2px;
-      height: 126px;
-      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-word-en {
-    font-style: normal;
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 150%;
-    text-align: center;
-    color: #2c2c2c;
-    margin-bottom: 8px;
-  }
-  .bwc-more-intp {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 20px;
-    color: #2c2c2c;
-    opacity: 0.5;
-    text-align: center;
-    margin-bottom: 24px;
-    cursor: pointer;
-  }
-  .bwc-footer {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    > button {
-      width: 128px;
-      height: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #ff5757;
-      background: rgba(255, 87, 87, 0.1);
-      border-radius: 4px;
-      outline: 0;
-      border: 0;
-      cursor: pointer;
-      > img {
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
-      }
-    }
-  }
-}
-.NPC-Big-Book-preview-green {
-  .wordIntp {
-    .bwc-intp {
-      .pinyin {
-        color: #24b99e;
-      }
-    }
-    .bwc-Strockplay {
-      border: 2px solid #24b99e;
-      .bwc-line {
-        background: #24b99e;
-      }
-    }
-    .bwc-tolength {
-      border: 2px solid #24b99e;
-    }
-    .bwc-footer {
-      > button {
-        color: #24b99e;
-      }
-    }
-  }
-}
-.NPC-Big-Book-preview-brown {
-  .wordIntp {
-    .bwc-intp {
-      .pinyin {
-        color: #bd8865;
-      }
-    }
-    .bwc-Strockplay {
-      border: 2px solid #bd8865;
-      .bwc-line {
-        background: #bd8865;
-      }
-    }
-    .bwc-tolength {
-      border: 2px solid #bd8865;
-    }
-    .bwc-footer {
-      > button {
-        color: #bd8865;
-      }
-    }
-  }
-}
-</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;
-  }
-}
-.NPC-Big-Book-preview-green {
-  .wordIntp {
-    .el-menu--horizontal > .el-menu-item.is-active {
-      color: #24b99e;
-      border-bottom: 2px solid #24b99e;
-    }
-  }
-}
-.NPC-Big-Book-preview-brown {
-  .wordIntp {
-    .el-menu--horizontal > .el-menu-item.is-active {
-      color: #bd8865;
-      border-bottom: 2px solid #bd8865;
-    }
-  }
-}
-</style>