浏览代码

Merge branch 'master' into gcj

# Conflicts:
#	src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue
guanchunjie 3 年之前
父节点
当前提交
92b849c11f

+ 2 - 0
src/components/Adult/Preview.vue

@@ -290,6 +290,7 @@
                   <NewWordShow
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
+                    :indexStr="index+'_'+indexs+'_'+indexss"
                     v-if="refresh"
                   />
                 </template>
@@ -684,6 +685,7 @@ export default {
   width: 860px;
   margin: 0 auto;
   position: relative;
+  padding-bottom:120px;
   .NNPE-title {
     background: #e35454;
     border-radius: 0px 0px 16px 16px;

+ 8 - 7
src/components/Adult/common/UploadView.vue

@@ -14,6 +14,7 @@
       :on-success="handleSuccess"
       :on-change="handleChange"
       :file-list="currentfileList"
+      :show-file-list="showList"
       :limit="filleNumber"
     >
       <div class="uploadBtn">
@@ -49,6 +50,7 @@ export default {
       currentfileList: [],
       fileTypeName: "",
       loading: false,
+      showList: false,
     };
   },
   computed: {
@@ -83,13 +85,14 @@ export default {
       // 深度观察监听
       deep: true,
     },
-    fileList(newval,oldval){
-      this.currentfileList = newval
-    }
+    fileList(newval, oldval) {
+      this.currentfileList = newval||[];
+    },
   },
   // 生命周期 - 创建完成(可以访问当前this实例)
   created() {
-    this.currentfileList = this.fileList;
+    this.currentfileList = this.fileList || [];
+    this.showList = this.fileList ? true : false;
   },
   // 生命周期 - 挂载完成(可以访问DOM元素)
   mounted() {
@@ -147,9 +150,7 @@ export default {
         } 个文件`
       );
     },
-    initUpload() {
- 
-    },
+    initUpload() {},
   }, // 如果页面有keep-alive缓存功能,这个函数会触发
 };
 </script>

+ 9 - 7
src/components/Adult/inputModules/UploadControl.vue

@@ -1,13 +1,15 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
-    <!-- <UploadView
-      :changeFillId="changeFillId"
-      :accept="accept"
-      :filleNumber="1"
-      :fileList="curQue.fileList"
-    /> -->
-    <div>
+    <template v-if="type =='upload_control_preview_chs'">
+      <UploadView
+        :changeFillId="changeFillId"
+        :accept="accept"
+        :filleNumber="1"
+        :fileList="curQue.fileList"
+      />
+    </template>
+    <div v-else>
       <div class="uploadBtn">
         <img
           style="width: 24px; height: 24px"

+ 18 - 1
src/components/Adult/inputModules/VoiceMatrix.vue

@@ -30,6 +30,15 @@
       size="small"
       @click="analyzeVoiceFile"
     >根据语音和文本进行打点标记</el-button>
+    <span :style="{'margin': '12px'}">匹配模式</span>
+    <el-select v-model="match_type" size="small">
+      <el-option
+        v-for="li in matchTypeList"
+        :key="li.type"
+        :label="li.name"
+        :value="li.type"
+      />
+    </el-select>
 
     <div class="voice-matrix-input">
       <el-input
@@ -147,6 +156,7 @@ export default {
         lrc_list: []
       },
       isShowMatrix: false,
+      match_type: 'pinyin',
       rowNumber: 1,
       columnNumber: 1,
       typeList: [
@@ -163,6 +173,11 @@ export default {
           name: "句子分词"
         }
       ],
+      matchTypeList: [
+        { type: "pinyin", name: "纯拼音(例:yu)" },
+        { type: "chinese", name: "中文(例:鱼)" },
+        { type: "pinyinWithToneMark", name: "拼音符号音调(例:yú)" }
+      ],
       data_structure: {
         type: "voice_matrix",
         name: "语音矩阵",
@@ -267,7 +282,9 @@ export default {
       let loading = this.$loading({ text: "正在分析,请等待" });
       getContentFile("tool-AnalyzeVoiceFile", {
         file_id: mp3_list[0].file_id,
-        text_list
+        text_list,
+        language: 'ZH',
+        match_type: this.match_type
       })
         .then(({ lrc_list }) => {
           loading.close();

+ 7 - 9
src/components/Adult/preview/AudioLine.vue

@@ -13,14 +13,11 @@
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
-        <span
-          ><template v-if="audio.playing">-</template
-          >{{
-            audio.maxTime
-              ? realFormatSecond(audio.maxTime - audio.currentTime)
-              : ""
-          }}</span
-        >
+        <span><template v-if="audio.playing">-</template>{{
+          audio.maxTime
+            ? realFormatSecond(audio.maxTime - audio.currentTime)
+            : ""
+        }}</span>
       </template>
       <audio
         ref="audio"
@@ -109,6 +106,7 @@ export default {
     "audio.playing": {
       handler(val) {
         this.$emit("playChange", val);
+        if (val) this.$emit("handleChangeStopAudio");
       },
     },
   },
@@ -250,7 +248,7 @@ export default {
           result = "0" + result;
         }
       } else {
-        //result = "00:" + result;
+        // result = "00:" + result;
       }
       return result;
     },

+ 17 - 22
src/components/Adult/preview/NewWordShow.vue

@@ -4,10 +4,8 @@
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
     <div class="item-box">
       <div class="item" v-for="(item, index) in curQue.option" :key="index">
-        <p v-if="item.pinyin">
-          <span>
-            {{ item.pinyin }}
-          </span>
+        <p v-if="item.pinyin||item.en ">
+          <span>{{ item.pinyin }}</span>
           <span>{{ item.en }}</span>
         </p>
         <div class="con-box">
@@ -22,7 +20,7 @@
                 <Strockplayredline
                   :Book_text="conItem"
                   :playStorkes="true"
-                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex"
+                  :targetDiv="'bwcHanziIntp' + index + conItem + conindex + indexStr"
                 />
                 <div
                   class="bwc-line"
@@ -77,7 +75,7 @@ import Practice from "../preview/components/Practice.vue";
 import FreePaint from "../preview/components/FreePaint.vue";
 export default {
   components: { Strockplayredline, Practice, FreePaint },
-  props: ["curQue", "themeColor"],
+  props: ["curQue", "themeColor", "indexStr"],
   data() {
     return {
       isPraShow: false,
@@ -140,13 +138,13 @@ export default {
 //@import url(); 引入公共css类
 .NewWordShow {
   width: 100%;
+  margin-bottom: 16px;
   h2 {
-    margin: 16px 0 0;
+    margin: 0 0 8px 0;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
     color: #000000;
-    margin-bottom: 16px;
   }
   .item-box {
     display: flex;
@@ -156,11 +154,8 @@ export default {
     background: #f7f7f7;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
+    align-items: flex-end;
     .item {
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      flex-flow: wrap;
       margin: 9px 20px;
       box-sizing: border-box;
       // width: 66px;
@@ -176,7 +171,6 @@ export default {
         color: #2c2c2c;
         font-size: 14px;
         line-height: 130%;
-        width: 100%;
         text-align: center;
         margin: 0 0 8px 0;
       }
@@ -204,6 +198,7 @@ export default {
       border: 1px solid #de4444;
       border-radius: 8px;
       overflow: hidden;
+      margin: 0 auto;
       .img-box {
         background: #fff url("../../../assets/NPC/chinaTianRed.png") center
           no-repeat;
@@ -299,9 +294,9 @@ export default {
 .NPC-Big-Book-preview-red {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-red-click.png") center
         no-repeat;
@@ -315,9 +310,9 @@ export default {
 .NPC-Big-Book-preview-green {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-green-click.png") center
         no-repeat;
@@ -331,9 +326,9 @@ export default {
 .NPC-Big-Book-preview-brown {
   .NewWordShow {
     .strock-play-box {
-      width: 16px;
-      height: 16px;
-      right: -2px;
+      width: 22px;
+      height: 22px;
+      right: -1px;
       top: 0;
       background: url("../../../assets/NPC/strock-play-yellow-click.png") center
         no-repeat;

+ 1 - 1
src/components/Adult/preview/Picture.vue

@@ -222,7 +222,7 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-PictureBox{
     width: 100%;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
     // &.PictureBoxFlex{
     //     display: flex;
     //     justify-content: space-between;

+ 11 - 3
src/components/Adult/preview/SentenceSortQP.vue

@@ -17,7 +17,12 @@
         >
           <transition-group>
             <div
-              class="item"
+              :class="[
+                'item',
+                JSON.stringify(SortArr[index]).indexOf(itemNode.pinyin) != -1
+                  ? 'select'
+                  : '',
+              ]"
               v-for="(itemNode, indexNode) in item.detail.wordsList"
               :key="indexNode"
             >
@@ -217,13 +222,16 @@ export default {
             font-size: 20px;
           }
         }
+        .select {
+          background: rgba(0, 0, 0, 0.06);
+        }
       }
     }
   }
   .item-right_bottom {
     min-width: 200px;
     max-width: 696px;
-    background: white;
+    background: rgba(0, 0, 0, 0.06);
     margin-left: 35px;
     margin-top: 10px;
     min-height: 70px;
@@ -234,7 +242,7 @@ export default {
         .item {
           width: 82px;
           height: 70px;
-          background: #e6e6e6;
+          background: #ffffff;
           border-radius: 8px;
           text-align: center;
           margin-right: 2px;

+ 21 - 3
src/components/Adult/preview/TableView.vue

@@ -8,7 +8,7 @@
             <th
               v-for="(item, headIndex) in curQue.headerList"
               :key="'header' + headIndex"
-              :style="{ width: curQue.colWidthList[headIndex].con + '%' }"
+              :style="{ width: curQue.colWidthList[headIndex].width + '%' }"
             >
               {{ item.con }}
             </th>
@@ -18,13 +18,14 @@
           <td
             v-for="(col, colIndex) in row"
             :key="'col' + colIndex"
-            :style="{ width: curQue.colWidthList[colIndex].con + '%' }"
+            :style="{ width: curQue.colWidthList[colIndex].width + '%' }"
           >
             <template v-if="!col.isNumll">
               {{ col.con }}
             </template>
             <template v-else>
-              <input type="text" v-model="col.con" />
+                <div v-html="col.con" contenteditable="true" placeholder="输入" class="input"></div>
+              <!-- <input type="text" v-model="col.con" /> -->
             </template>
           </td>
         </tr>
@@ -110,6 +111,7 @@ export default {
       font-size: 16px;
       line-height: 150%;
       color: #000000;
+      margin: 16px 0 8px 0;
     }
     > div {
       display: flex;
@@ -161,18 +163,23 @@ export default {
     table {
       width: 100%;
       border-collapse: collapse; //取消单元格之间的间距
+      table-layout: fixed;
       tr {
         width: 100%;
         th {
           background: rgba(236, 157, 99, 0.1);
           border: 1px solid #e2cfc1;
           height: 40px;
+          font-size: 16px;
+          color: #000000;
         }
         td {
           background: #ffffff;
           border: 1px solid #e2cfc1;
           height: 64px;
           text-align: center;
+          color: #000000;
+          font-size: 16px;
           input {
             outline: none;
             border: none;
@@ -180,6 +187,17 @@ export default {
             width: 90%;
             height: 100%;
           }
+          .input{
+            width: 90%;
+            min-height:24px;
+            margin: 0 auto;
+            font-size: 16px;
+            line-height: 1.5;
+          }
+          .input:empty::before {
+            content: attr(placeholder);
+            color: rgba($color: #000000, $alpha: 0.25);
+          }
         }
       }
     }

+ 27 - 7
src/components/Adult/preview/TextInputRecord.vue

@@ -107,14 +107,16 @@ export default {
         margin-right: 8px;
       }
       > b {
-        width: 24px;
-        line-height: 24px;
-        font-size: 16px;
-        text-align: right;
         margin-right: 8px;
-        font-weight: 400;
-        color: #000000;
-        font-family: "FZJCGFKTK";
+        background: #de4444;
+        text-align: center;
+        width: 16px;
+        height: 16px;
+        color: #ffffff;
+        border-radius: 100%;
+        font-size: 12px;
+        font-family: "robot";
+        line-height: 16px;
       }
       .item-con {
         min-width: 80px;
@@ -155,4 +157,22 @@ export default {
     }
   }
 }
+.NPC-Big-Book-preview-green {
+  .Big-Book-prev-Textdes {
+    li {
+      b {
+        background: #24b99e;
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .Big-Book-prev-Textdes {
+    li {
+      b {
+        background: #bd8865;
+      }
+    }
+  }
+}
 </style>

+ 8 - 0
src/components/Adult/preview/TinyModule.vue

@@ -34,6 +34,7 @@ export default {
 //@import url(); 引入公共css类
 .Big-Book-prev-Tiny{
     width: 100%;
+    margin-bottom: 16px;
     h2{
         margin: 16px 0 0;
         font-weight: 500;
@@ -45,4 +46,11 @@ export default {
         word-break: break-word;
     }
 }
+</style>
+<style lang="scss">
+.Big-Book-prev-Tiny{
+    p{
+        margin: 0;
+    }
+}
 </style>

+ 8 - 11
src/components/Adult/preview/UploadControlView.vue

@@ -1,11 +1,12 @@
 <!--  -->
 <template>
   <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
-    <div style="display: flex" v-if="type=='upload_control_chs'">
+    <div style="display: flex" v-if="type == 'upload_control_chs'">
       <UploadView
         :changeFillId="changeFillId"
         :accept="accept"
         :filleNumber="1"
+        :fileList="false"
       />
       <!-- <div class="uploadBtn" @click="downLoad">
         <img
@@ -16,7 +17,7 @@
         下载表格
       </div> -->
     </div>
-    <div class="dv" v-loading="loading">
+    <div class="dv"  v-if="curQue.data">
       <div class="main">
         <div class="content">
           <template v-if="curQue.data">
@@ -41,7 +42,7 @@
           </template>
         </div>
       </div>
-      <div v-if="type=='upload_control_chs'" class="remove" @click="remove">
+      <div v-if="type == 'upload_control_chs'" class="remove" @click="remove">
         <img src="../../../assets/adult/red_remove.png" alt="" />
       </div>
     </div>
@@ -58,7 +59,7 @@ export default {
     UploadView,
     pdf,
   },
-  props: ["curQue", "fn_data","type"],
+  props: ["curQue", "fn_data", "type"],
   data() {
     return {
       uploadType: "",
@@ -111,13 +112,12 @@ export default {
       this.data = null;
       this.curQue.data = null;
       this.curQue.fileList = [];
-      this.$message.success("删除成功")
-
+      this.$message.success("删除成功");
     },
     changeFillId(fileList, item, index) {
       this.curQue.fileList = fileList;
       this.curQue.data = fileList[0].response.file_info_list[0];
-      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
+      if (this.curQue.data.file_name.indexOf("pdf") != -1) {
         this.curQue.data = fileList[0].response.file_info_list[0];
         this.curQue.data.fileRelativePath =
           process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
@@ -135,7 +135,6 @@ export default {
           _this.numPages = pdff.numPages;
           _this.curQue.data.numPages = pdff.numPages;
           this.$forceUpdate();
-
         })
         .catch((err) => {
           console.error("pdf 加载失败", err);
@@ -147,9 +146,7 @@ export default {
     },
   },
   //生命周期 - 创建完成(可以访问当前this实例)
-  created() {
-
-  },
+  created() {},
   //生命周期 - 挂载完成(可以访问DOM元素)
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前

+ 82 - 20
src/components/Adult/preview/VoiceMatrix.vue

@@ -42,15 +42,18 @@
             :key="`top-${i}`"
             :class="[
               'matrix-top',
-              curQue.voiceMatrix.columnSelection && (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+              curQue.voiceMatrix.columnSelection &&
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
             @mouseenter="checkboxMouseenter(selectColumn === i, 'column')"
           >
             <span
-              v-if="row.type !== 'connection' && curQue.voiceMatrix.columnSelection"
+              v-if="
+                row.type !== 'connection' && curQue.voiceMatrix.columnSelection
+              "
               v-show="
                 selectColumn === i ||
                   (selectedLine.type === 'column' && selectedLine.index === i)
@@ -72,8 +75,9 @@
             :key="`start-${i}`"
             :class="[
               'column-wrapper',
-              curQue.voiceMatrix.rowSelection && (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+              curQue.voiceMatrix.rowSelection &&
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -102,11 +106,16 @@
                 'column-wrapper',
                 (curQue.voiceMatrix.rowSelection && selectRow === i) ||
                   (curQue.voiceMatrix.columnSelection && selectColumn === j) ||
-                  (curQue.voiceMatrix.columnSelection && selectedLine.type === 'column' && selectedLine.index === j) ||
-                  (curQue.voiceMatrix.rowSelection && selectedLine.type === 'row' && selectedLine.index === i)
+                  (curQue.voiceMatrix.columnSelection &&
+                    selectedLine.type === 'column' &&
+                    selectedLine.index === j) ||
+                  (curQue.voiceMatrix.rowSelection &&
+                    selectedLine.type === 'row' &&
+                    selectedLine.index === i)
                   ? 'read'
                   : '',
-                (i === 0 && curQue.voiceMatrix.firstLineHighlight) || (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
+                (i === 0 && curQue.voiceMatrix.firstLineHighlight) ||
+                  (j === row.length - 1 && curQue.voiceMatrix.lastColumnHighlight)
                   ? `highlight-${themeColor}`
                   : ''
               ]"
@@ -131,7 +140,8 @@
                     : '',
                   column.isTitle ? 'title' : ''
                 ]"
-                @click="matrixCellClick(i, j)"
+                @click="cellClickTimeout(i, j)"
+                @dblclick="matrixCelDblClick(i, j)"
               >
                 <span>{{ column.text }}</span>
               </div>
@@ -168,7 +178,8 @@
                 :style="{
                   'grid-template-columns': `repeat(${column.sentence_data.wordsList.length}, auto)`
                 }"
-                @click="matrixCellClick(i, j)"
+                @click="cellClickTimeout(i, j)"
+                @dblclick="matrixCelDblClick(i, j)"
               >
                 <template v-for="(word, w) in column.sentence_data.wordsList">
                   <span
@@ -201,8 +212,9 @@
           <div
             :key="`end-${i}`"
             :class="[
-              curQue.voiceMatrix.rowSelection && (selectRow === i ||
-                (selectedLine.type === 'row' && selectedLine.index === i))
+              curQue.voiceMatrix.rowSelection &&
+                (selectRow === i ||
+                  (selectedLine.type === 'row' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -216,8 +228,9 @@
             :key="`bottom-${i}`"
             :class="[
               'matrix-bottom',
-              curQue.voiceMatrix.columnSelection && (selectColumn === i ||
-                (selectedLine.type === 'column' && selectedLine.index === i))
+              curQue.voiceMatrix.columnSelection &&
+                (selectColumn === i ||
+                  (selectedLine.type === 'column' && selectedLine.index === i))
                 ? 'read'
                 : ''
             ]"
@@ -238,6 +251,7 @@
 </template>
 
 <script>
+import Bus from './components/Bus.js';
 import AudioLine from "./AudioLine.vue";
 import Soundrecord from "./Soundrecord.vue";
 
@@ -254,8 +268,7 @@ export default {
       stopAudio: true,
       unWatch: null,
       lrcArray: [],
-      // voicePauseSrc: require("../../../assets/common/icon-voice-red.png"),
-      // voicePlaySrc: require("../../../assets/common/icon-voice-red-play.png"),
+      cellTimer: null,
       fileName: "",
       // 底色行、列
       selectRow: -1,
@@ -305,6 +318,11 @@ export default {
       this.handleParentPlay();
     }
   },
+  created() {
+    Bus.$on('audioPause', () => {
+      this.handleParentPlay();
+    });
+  },
   methods: {
     // 鼠标移入移出
     matrixCellMouseenter(i, j, type) {
@@ -322,8 +340,15 @@ export default {
       this.selectColumn = -1;
     },
 
+    cellClickTimeout(row, column) {
+      clearTimeout(this.cellTimer);
+      this.cellTimer = setTimeout(() => { this.matrixCellClick(row, column); }, 200);
+    },
+
     matrixCellClick(row, column) {
       if (this.playing) this.handleParentPlay();
+      if (this.unWatch) this.unWatch();
+      this.lrcArray = [];
       if (row === this.selectCell.row && column === this.selectCell.column) {
         this.selectCell = { row: -1, column: -1 };
         return;
@@ -340,6 +365,22 @@ export default {
       if (!this.hasSelectedCell) this.handleParentPlay();
     },
 
+    matrixCelDblClick(row, column) {
+      clearTimeout(this.cellTimer);
+      this.selectedLine = { type: "", index: -1 };
+      this.selectCell = { row, column };
+      this.handleChangeTime(
+        this.curQue.voiceMatrix.matrix[row][column].lrc_data
+      );
+      // 设置录音文件名
+      let { type, text, sentence_data } = this.curQue.voiceMatrix.matrix[row][
+        column
+      ];
+      this.fileName = `${type === "text" ? text : ""}${
+        type === "SentenceSegwordChs" ? sentence_data.sentence : ""
+      }`;
+    },
+
     checkboxMouseenter(isSelected, type) {
       if (!isSelected) return this.clearSelectCell();
       if (type === "row") this.selectColumn = -1;
@@ -360,7 +401,14 @@ export default {
         return;
       }
       this.selectedLine = { type, index };
-      this.fileName = `第 ${index + 1} ${type === "row" ? "行" : "列"}`;
+      let number = index;
+      if (type === 'column') {
+        this.curQue.voiceMatrix.matrix[index].forEach(({ type }, i) => {
+          if (i >= index) return;
+          if (type === 'connection') number -= 1;
+        });
+      }
+      this.fileName = `第 ${number + 1} ${type === "row" ? "行" : "列"}`;
     },
 
     playAudio() {
@@ -430,6 +478,8 @@ export default {
 
     playChange(playing) {
       this.playing = playing;
+      // 子组件通信,同时只能播放一个音频
+      if (playing) Bus.$emit('audioPause');
     },
 
     // 暂停音频播放
@@ -545,6 +595,7 @@ $select-color-brown-active: #a37557;
     background-color: #f5f5f5;
     border-left: 1px solid $border-color;
     border-right: 1px solid $border-color;
+    word-break: break-word;
 
     .matrix {
       display: inline-grid;
@@ -672,7 +723,6 @@ $select-color-brown-active: #a37557;
         %column {
           width: 100%;
           height: 100%;
-          padding: 7px 16px;
           min-height: 32px;
           background-color: #fff;
           border: 1px solid $border-color;
@@ -697,6 +747,11 @@ $select-color-brown-active: #a37557;
             background-color: transparent;
             border-color: transparent;
           }
+
+          > span {
+            display: inline-block;
+            padding: 7px 16px;
+          }
         }
 
         %column-red,
@@ -747,6 +802,7 @@ $select-color-brown-active: #a37557;
           @extend %column;
 
           display: inline-grid;
+          padding: 7px 16px;
           column-gap: 8px;
           justify-items: center;
           justify-content: start;
@@ -836,8 +892,8 @@ $select-color-brown-active: #a37557;
 </style>
 
 <style lang="scss" scoped>
-.NNPE-tableList-tr-last{
-  .voice-matrix{
+.NNPE-tableList-tr-last {
+  .voice-matrix {
     padding-bottom: 0;
   }
 }
@@ -854,5 +910,11 @@ $select-color-brown-active: #a37557;
       width: 100% !important;
     }
   }
+
+  .luyin-box {
+    .el-select .el-input {
+      width: 136px;
+    }
+  }
 }
 </style>

+ 0 - 1
src/components/Adult/preview/components/AudioRed.vue

@@ -53,7 +53,6 @@ export default {
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {
-    console.log(this.themeColor);
     var that = this;
     window.stopAudioVoice = function () {
       if (that.audio) {

+ 2 - 0
src/components/Adult/preview/components/Bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();

+ 1 - 5
src/components/Adult/preview/components/FreePaint.vue

@@ -404,10 +404,6 @@ export default {
 </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;
   }
@@ -433,7 +429,7 @@ export default {
     border: none;
   }
   .el-tabs--border-card > .el-tabs__content {
-    padding: 24px;
+    padding: 0px;
   }
   .el-tab-pane {
     display: flex;

+ 0 - 24
src/components/Adult/preview/components/Freewrite.vue

@@ -131,27 +131,3 @@ export default {
   }
 }
 </style>
-<style lang="scss">
-.strock-play-box {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  width: 84px;
-  height: 84px;
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  > img {
-    width: 19px;
-    height: 24px;
-  }
-}
-.strock-play-box:active {
-  background: url("../../../../assets/NPC/strock-play-red-click.png");
-  background-size: 100%;
-}
-</style>

+ 203 - 160
src/components/Adult/preview/components/Practice.vue

@@ -19,127 +19,190 @@
             : require('../../../../assets/icon/Cross-16-normal-red.png')
         "
       />
-      <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">
-                <template v-if="collectFlag">
-                  <img
-                    :src="
-                      themeColor
-                        ? themeColor == 'green'
-                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                          : themeColor == 'brown'
-                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                          : require('../../../../assets/icon/starline-16-normal-red.png')
-                        : require('../../../../assets/icon/starline-16-normal-red.png')
-                    "
-                    class="practice-icon"
-                  />
-                </template>
-                <template v-else>
-                  <img
-                    :src="
-                      themeColor
-                        ? themeColor == 'green'
-                          ? require('../../../../assets/icon/starline-16-normal-Green.png')
-                          : themeColor == 'brown'
-                          ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                          : require('../../../../assets/icon/starline-16-normal-red.png')
-                        : require('../../../../assets/icon/starline-16-normal-red.png')
-                    "
-                    class="practice-icon"
-                  />
+      <el-tabs type="border-card" @tab-click="handleClick">
+        <el-tab-pane label="简体">        
+        </el-tab-pane>
+        <el-tab-pane label="繁体">         
+        </el-tab-pane>
+      </el-tabs>
+      <div class="tab-box">
+          <div class="tab-box_0" :class="[isShow=='0'?'z-top':'']">
+              <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">
+                        <template v-if="collectFlag">
+                        <img
+                            :src="
+                            themeColor
+                                ? themeColor == 'green'
+                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                                : themeColor == 'brown'
+                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                            "
+                            class="practice-icon"
+                        />
+                        </template>
+                        <template v-else>
+                        <img
+                            :src="
+                            themeColor
+                                ? themeColor == 'green'
+                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                                : themeColor == 'brown'
+                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                            "
+                            class="practice-icon"
+                        />
+                        </template>
+                        收藏
+                    </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">
+                            <a @click="resetHuahua(index)" class="clean-btn"></a>
+                            </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>
-                收藏
-              </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">
+          <div class="tab-box_1" :class="[isShow=='1'?'z-top':'']">
+              <div class="left-content">
+                    <div class="strockplay">
+                    <Strockplayredline
+                        :playStorkes="true"
+                        :wordNum="item.TChinese.length"
+                        :Book_text="item.TChinese"
+                        :targetDiv="'praT' + item.TChinese + index"
+                    />
+                    </div>
+                    <div class="left-content-pra"></div>
+                    <div class="footer">
+                    <div @click="collectFlag = !collectFlag" class="bg-box">
+                        <template v-if="collectFlag">
+                        <img
+                            :src="
+                            themeColor
+                                ? themeColor == 'green'
+                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                                : themeColor == 'brown'
+                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                            "
+                            class="practice-icon"
+                        />
+                        </template>
+                        <template v-else>
+                        <img
+                            :src="
+                            themeColor
+                                ? themeColor == 'green'
+                                ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                                : themeColor == 'brown'
+                                ? require('../../../../assets/icon/starline-16-normal-Brown.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                                : require('../../../../assets/icon/starline-16-normal-red.png')
+                            "
+                            class="practice-icon"
+                        />
+                        </template>
+                        收藏
+                    </div>
+                    </div>
+                </div>
+                <template>
+                    <div class="right-content">
+                    <div class="right-strockred">
+                        <template v-if="navIndex == 0">
+                        <Strockred
+                            :Book_text="cur.stem[0].TChinese"
+                            :hanzicolor="hanzicolor"
+                            :playStorkes="playStorkes"
+                            :targetDiv="'write-praT'+cur.stem[0].TChinese"
+                        />
+                        </template>
+                        <template v-else>
+                        <Freewrite
+                            :cur="cur"
+                            :lineColor="hanzicolor"
+                            :lineWidth="hanziweight"
+                            ref="freewrite"
+                        />
+                        <div class="footer">
+                            <div class="pen-colors">
+                            <a @click="resetHuahua(index)" class="clean-btn"></a>
+                            </div>
+                        </div>
+                        </template>
+                    </div>
+
+                    <ul class="nav-list">
+                        <li
+                        :class="navIndex == 0 ? 'active' : ''"
+                        @click="changeNav(0)"
+                        >
+                        描红
+                        </li>
                         <li
-                          :class="
-                            colorIndex == index
-                              ? 'color-item-active' + index
-                              : ''
-                          "
-                          :key="'color' + index"
-                          @click="changeColor(index)"
-                          v-for="(item, index) in 5"
+                        :class="navIndex == 1 ? 'active' : ''"
+                        @click="changeNav(1)"
                         >
-                          <span :class="'color-item' + index"></span>
+                        默写
                         </li>
-                      </ul> -->
-                      <a @click="resetHuahua(index)" class="clean-btn"></a>
+                    </ul>
                     </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-tabs>
+          </div>
+      </div>
     </div>
   </div>
 </template>
@@ -148,15 +211,11 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Strockred from "./Strockred.vue";
 import Freewrite from "./Freewrite.vue";
-// import ChinaDict from "./ChinaDict";
-// import Audio from "./AudioRed.vue";
 export default {
   components: {
     Strockplayredline,
     Strockred,
     Freewrite,
-    // ChinaDict,
-    // Audio,
   },
   props: ["cur", "changePraShow", "themeColor"],
   data() {
@@ -175,6 +234,7 @@ export default {
       thickpen: require("../../../../assets/common/thick-pen.png"),
       thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
       collectFlag: false, // 是否收藏
+      isShow: '0'
     };
   },
   computed: {},
@@ -199,9 +259,11 @@ export default {
       this.learn_mode = mode;
     },
     resetHuahua(index) {
-      console.log(this.$refs.freewrite);
       this.$refs.freewrite[index].handelReset();
     },
+    handleClick(tab, event){
+        this.isShow = tab.index
+    }
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {
@@ -225,7 +287,7 @@ export default {
 <style lang='scss' scoped>
 .practice {
   width: 504px;
-  max-height: 434px;
+//   max-height: 434px;
   overflow: auto;
   margin: 0 auto;
   background: #f3f3f3;
@@ -259,10 +321,10 @@ export default {
   .Book_content {
     width: 100%;
     height: 100%;
-    display: flex;
+    // display: flex;
     box-sizing: border-box;
     position: relative;
-    align-items: flex-start;
+    // align-items: flex-start;
   }
   .left-content {
     display: flex;
@@ -466,6 +528,25 @@ export default {
 .el-tabs {
   width: 100%;
 }
+.tab-box{
+    background: #fff;
+    padding: 24px;
+    position: relative;
+    height: 428px;
+    >div{
+        display: flex;
+        box-sizing: border-box;
+        position: relative;
+        align-items: flex-start;
+        position: absolute;
+        left: 24px;
+        top: 24px;
+        z-index: 1;
+        &.z-top{
+            z-index: 2;
+        }
+    }
+}
 .NPC-Big-Book-preview-green {
   .practice {
     .nav-list {
@@ -495,41 +576,3 @@ export default {
   }
 }
 </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;
-  }
-}
-</style>

+ 2 - 2
src/components/Adult/preview/components/Strockplayredline.vue

@@ -118,8 +118,8 @@ export default {
   // right: -2px;
   // top: 0px;
   z-index: 999;
-  width: 16px;
-  height: 16px;
+  width: 22px;
+  height: 22px;
   display: flex;
   justify-content: center;
   align-items: center;

+ 24 - 3
src/components/Adult/preview/components/Wordcard.vue

@@ -20,6 +20,19 @@
         :pinyin="word.detail.pinyin"
         :themeColor="themeColor"
       />
+      <img
+          :src="
+            themeColor
+              ? themeColor == 'green'
+                ? require('../../../../assets/NPC/play-green.png')
+                : themeColor == 'brown'
+                ? require('../../../../assets/NPC/play-brown.png')
+                : require('../../../../assets/NPC/play-red.png')
+              : require('../../../../assets/NPC/play-red.png')
+          "
+          v-if="word.detail.mp3_list.length == 0"
+          style="width: 16px;"
+        />
     </div>
     <div
       class="bwc-Strockplay"
@@ -131,7 +144,7 @@ import Audio from "./AudioRed.vue";
 import Strockplayredline from "./Strockplayredline.vue";
 import Practice from "./Practice.vue";
 import Wordintp from "./Wordintp.vue";
-
+import { getContentFile } from "@/api/ajax";
 export default {
   name: "Wordcard",
   components: {
@@ -169,17 +182,25 @@ export default {
   },
   //方法集合
   methods: {
-    writeWord(words, pinyin) {
-      this.isPraShow = true;
+   async writeWord(words, pinyin) {
+      let _this = this;
+      const MethodName = "tool-ChineseSCConvert";
+      const data = {
+        text: words,
+        swap_mode: 'S-C'
+      };
+      let TChinese = await getContentFile(MethodName,data)
       this.curData = {
         stem: [
           {
             con: words ? words : "",
             pinyin: pinyin && pinyin ? pinyin : "",
             mp3_url: "",
+            TChinese: TChinese.text
           },
         ],
       };
+      this.isPraShow = true;
     },
     changePraShow() {
       this.isPraShow = false;

+ 43 - 1
src/components/TreeView.vue

@@ -77,7 +77,14 @@ export default {
   components: {
     Tree: Tree.mixPlugins([Fold, Draggable]),
   },
-  props: ["changeId", "emptyQustion", "bookId", "tryFree", "changeTreeData"],
+  props: [
+    "changeId",
+    "emptyQustion",
+    "bookId",
+    "tryFree",
+    "changeTreeData",
+    "currentTreeID",
+  ],
   data() {
     return {
       treeData: [],
@@ -102,9 +109,44 @@ export default {
       activeIndex: "", // 高亮节点
       nodeLevel: "", // 高亮节点的level
       nodeName: "",
+      pidList: [],
     };
   },
+  watch: {
+    async currentTreeID(newval, oldval) {
+      if (newval) {
+        this.activeIndex = newval;
+        await this.unfoldData(this.activeIndex, this.treeData);
+        await this.unfoldFather(this.treeData);
+      }
+    },
+  },
   methods: {
+    // 递归找到当前节点的所有父节点
+    unfoldData(activeIndex, data, index, child) {
+      data.forEach((item, i) => {
+        if (item.id == activeIndex) {
+          this.pidList.push(item.pid);
+          if (Object.prototype.toString.call(index).indexOf("Number") != -1) {
+            this.pidList.push(child.pid);
+          }
+        } else if (item.children) {
+          this.unfoldData(activeIndex, item.children, i, item);
+        }
+      });
+    },
+    // 展示父节点
+    unfoldFather(data) {
+      data.forEach((item, i) => {
+        this.pidList.forEach((p) => {
+          if (item.id == p) {
+            item.$folded = false;
+          } else if (item.children) {
+            this.unfoldFather(item.children);
+          }
+        });
+      });
+    },
     foldAll() {
       if (this.$refs.tree !== undefined) {
         this.$refs.tree.foldAll();

+ 2 - 1
src/views/courseView.vue

@@ -8,6 +8,7 @@
           :book-id="bookId"
           :change-id="changeId"
           :changeTreeData="changeTreeData"
+          :currentTreeID="chapterId"
         />
       </div>
       <div id="data-screen" class="inner">
@@ -20,7 +21,7 @@
             src="../assets/common/icon-treelist.png"
             @click="treeShow"
           />
-          <h2 class="title">{{ chapterName }}</h2>
+          <!-- <h2 class="title">{{ chapterName }}</h2> -->
           <el-switch
             v-if="!treeFlag"
             v-model="switchvalue"