DialogueAnswer

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

@@ -105,6 +105,7 @@ export default {
             wordTime: [],
             taskId: "",
             answer: "",
+            font: "cn",
           },
         ],
         option: [

src/components/Adult/inputModules/DialogueTem/components/RoleChs.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="NPC-da-role">
+  <div class="NPC-da-role" v-if="curRole">
     <div class="adult-book-input-item NPC-da-role-flex">
       <span class="adult-book-lable">角色:</span>
       <el-input

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

@@ -5,42 +5,15 @@
     v-if="curQue"
     v-loading="loading"
   >
-    <!-- <div class="Big-Book-img">
-      <UploadArt
-        :change-fill-id="changeImage"
-        :datafile-list="fileCon.img_list"
-        upload-type="image"
-        class="article_pdf"
-        :filleNumber="imageNumber"
-      />
-      <ul
-        class="uploadArt_list"
-        v-if="curQue.img_list && curQue.img_list.length > 0"
-      >
-        <li
-          v-for="(artItem, artIndex) in curQue.img_list"
-          :key="'articleImgList' + artIndex"
-        >
-          <img :src="artItem.url" style="width: 26px" />
-          <span class="art_name">{{ artItem.name }}</span>
-          <p>
-            图片放到第<el-input
-              class="imgNumber"
-              type="number"
-              v-model="artItem.imgNumber"
-              size="mini"
-              @input="forceUpdate"
-            ></el-input
-            >段落的后面
-          </p>
-          <img
-            src="@/assets/adult/del-close.png"
-            class="del-close"
-            @click="delImage(artIndex)"
-          />
-        </li>
-      </ul>
-    </div> -->
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">序号：</span>
+      <el-input
+        class="adult-book-input"
+        placeholder="请输入文章提示"
+        v-model="curQue.number"
+        @blur="onBlur(curQue, 'number')"
+      ></el-input>
+    </div>
     <div class="Big-Book-mp3">
       <Upload
         :changeFillId="changeImage"
@@ -60,6 +33,13 @@
       />
     </div>
     <div class="adult-book-input-item">
+      <span class="adult-book-lable">内容类型：</span>
+      <el-radio-group v-model="curQue.font">
+        <el-radio label="py">拼音</el-radio>
+        <el-radio label="cn">汉字</el-radio>
+      </el-radio-group>
+    </div>
+    <div class="adult-book-input-item">
       <span class="adult-book-lable">文章提示：</span>
       <el-input
         class="adult-book-input"
@@ -126,25 +106,27 @@
     <div class="NPC-Book-Paragraph" v-if="isClause">
       <Clauseresult :curQue="curQue" :segByWord="segByWord" />
     </div>
-    <div class="lrc-box">
-      <div
-        v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
-        class="lrc-box"
-      >
-        <span>已有字幕时间节点</span>
-        <el-button type="text" @click="againWordTime">重新生成</el-button>
-      </div>
-      <template v-else>
-        <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
-          >自动生成字幕节点</el-button
+    <template v-if="curQue.font !== 'py'">
+      <div class="lrc-box">
+        <div
+          v-if="this.curQue.wordTime && this.curQue.wordTime.length > 0"
+          class="lrc-box"
         >
-        <p v-else>字幕节点生成中...请等待</p>
-      </template>
-    </div>
-    <!---分词-->
-    <div class="NPC-Book-Word" v-if="isByWord">
-      <Segbyword :curQue="curQue" :paraIndex="paraIndex" :segList="segList" />
-    </div>
+          <span>已有字幕时间节点</span>
+          <el-button type="text" @click="againWordTime">重新生成</el-button>
+        </div>
+        <template v-else>
+          <el-button v-if="!isWordTime" size="medium" @click="createWordTime"
+            >自动生成字幕节点</el-button
+          >
+          <p v-else>字幕节点生成中...请等待</p>
+        </template>
+      </div>
+      <!---分词-->
+      <div class="NPC-Book-Word" v-if="isByWord">
+        <Segbyword :curQue="curQue" :paraIndex="paraIndex" :segList="segList" />
+      </div>
+    </template>
     <!---答案-->
 
     <div class="adult-book-input-item">
@@ -290,6 +272,10 @@ export default {
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
+    onBlurIndex(index, field) {
+      let res = this.curQueItem[field][index].trim();
+      this.$set(this.curQueItem[field], index, res);
+    },
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
@@ -529,6 +515,9 @@ export default {
       console.log("对话答题保存");
       console.log(this.curQue);
       if (this.curQue) {
+        if (!this.curQue.number) {
+          this.curQue.number = "";
+        }
         if (this.curQue.detail && this.curQue.detail.length > 0) {
           if (this.curQue.detail[0].para) {
             this.isPara = true;

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

@@ -15,10 +15,6 @@
     </div>
     <template v-if="resArr.length > 0">
       <div class="NPC-sentences-list">
-        <div class="NPC-article-empty">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
-          <div class="empty-right"></div>
-        </div>
         <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
         <div
           :class="[
@@ -194,9 +190,68 @@
             <RemarkChs :remarkDetail="item.remarkDetail" />
           </div>
         </div>
-        <div class="NPC-article-empty NPC-article-empty-bottom">
-          <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
-          <div class="empty-right"></div>
+        <!-- <div class="dia-article-record">
+          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+        </div> -->
+      </div>
+    </template>
+    <template v-if="paraArr.length > 0">
+      <div class="NPC-sentences-list">
+        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <div
+          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
+          v-for="(item, index) in paraArr"
+          :key="'detail' + index"
+        >
+          <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
+            <RoleChs :curRole="item.roleDetail" :type="1" />
+            <div class="wordsList-box">
+              <div
+                class="roleDetail"
+                v-if="item.roleDetail.detail.wordsList.length > 0"
+              >
+                <span class="pinyin">{{
+                  item.roleDetail.detail.wordsList | handlePinyin
+                }}</span>
+                <span class="chs">{{
+                  item.roleDetail.detail.wordsList | handleChs
+                }}</span>
+              </div>
+              <div
+                class="para-con"
+                :style="{ background: item.roleDetail.color.bg }"
+              >
+                <div
+                  class="NNPE-words"
+                  v-for="(pItem, pIndex) in item.wordsList"
+                  :key="'wordsList' + pIndex"
+                >
+                  <template v-if="!pItem.isHeng">
+                    <span class="NNPE-para-pinyin padding">{{
+                      pItem.con
+                    }}</span>
+                  </template>
+                  <template v-else>
+                    <input v-model="pItem.answer" class="answer-input" />
+                  </template>
+                </div>
+                <div v-if="item.enwords" class="enwords">
+                  {{ item.enwords }}
+                </div>
+              </div>
+              <div class="clearFix"></div>
+              <div class="input-record" v-if="item.isRecord">
+                <Soundrecord
+                  @handleWav="handleWav"
+                  type="mini"
+                  class="mini-box"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="remarkBox remark-top" v-if="item.remarkDetail">
+            <RemarkChs :remarkDetail="item.remarkDetail" />
+          </div>
         </div>
         <!-- <div class="dia-article-record">
           <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
@@ -258,6 +313,8 @@ export default {
       left: 0,
       articleImg: {}, // 文章图片
       isHasRemark: false,
+      paraArr: [],
+      answer: [],
     };
   },
   computed: {},
@@ -281,49 +338,51 @@ export default {
           this.isHasRemark = true;
         }
         let paraArr = [];
-        dItem.wordsList.forEach((sItem, sIndex) => {
-          sItem.forEach((wItem, wIndex) => {
-            this.mergeWordSymbol(wItem);
-            let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              answer: "",
-              wordIndex: wIndex, //单词的索引
-              pinyin: wItem.pinyin,
-              chs: wItem.chs,
-              isHeng: reg.test(wItem.chs),
-              padding: true, //wItem.padding,
-              className: wItem.className,
-              isShow: wItem.isShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
-            };
-            paraArr.push(obj);
-            if (obj.isHeng) {
-              isRecord = isRecord + 1;
-            }
+        if (dItem.wordsList && dItem.wordsList.length > 0) {
+          dItem.wordsList.forEach((sItem, sIndex) => {
+            sItem.forEach((wItem, wIndex) => {
+              this.mergeWordSymbol(wItem);
+              let obj = {
+                paraIndex: dIndex, //段落索引
+                sentIndex: sIndex, //在段落中句子索引
+                wordIndex: wIndex, //单词的索引
+                pinyin: wItem.pinyin,
+                chs: wItem.chs,
+                isHeng: reg.test(wItem.chs),
+                padding: true, //wItem.padding,
+                className: wItem.className,
+                isShow: wItem.isShow,
+                isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              };
+              if (obj.isHeng) {
+                isRecord = isRecord + 1;
+                obj.answer = "";
+              }
+              paraArr.push(obj);
+            });
           });
-        });
-        let curSentencesLeg = dItem.sentences.length;
-        let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
-        let endLeg = startLeg + curSentencesLeg;
-        dItem.endLeg = endLeg;
-        let timeList = [];
-        if (curQue.wordTime && curQue.wordTime.length > 0) {
-          timeList = curQue.wordTime.slice(startLeg, endLeg);
+          let curSentencesLeg = dItem.sentences.length;
+          let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
+          let endLeg = startLeg + curSentencesLeg;
+          dItem.endLeg = endLeg;
+          let timeList = [];
+          if (curQue.wordTime && curQue.wordTime.length > 0) {
+            timeList = curQue.wordTime.slice(startLeg, endLeg);
+          }
+          let enwords =
+            dItem.sentencesEn && dItem.sentencesEn.length > 0
+              ? dItem.sentencesEn.join(" ")
+              : "";
+          let paraObj = {
+            wordsList: paraArr,
+            enwords: enwords,
+            timeList: timeList,
+            roleDetail: roleDetail,
+            remarkDetail: remarkDetail,
+            isRecord: isRecord > 0 ? true : false,
+          };
+          resArr.push(paraObj);
         }
-        let enwords =
-          dItem.sentencesEn && dItem.sentencesEn.length > 0
-            ? dItem.sentencesEn.join(" ")
-            : "";
-        let paraObj = {
-          wordsList: paraArr,
-          enwords: enwords,
-          timeList: timeList,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          isRecord: isRecord > 0 ? true : false,
-        };
-        resArr.push(paraObj);
       });
       this.resArr = resArr;
       console.log("Normal");
@@ -336,6 +395,29 @@ export default {
         });
       }
     },
+    handlePYData() {
+      let pararArr = [];
+      let curQue = JSON.parse(JSON.stringify(this.curQue));
+      curQue.detail.forEach((dItem, dIndex) => {
+        let para = dItem.para;
+        let paraObj = this.handlePara(para);
+        let roleDetail = this.getRole(dItem);
+        let remarkDetail = dItem.remark;
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+          this.isHasRemark = true;
+        }
+        let obj = {
+          wordsList: paraObj.wordsList,
+          roleDetail: roleDetail,
+          remarkDetail: remarkDetail,
+          isRecord: paraObj.isRecord,
+        };
+        pararArr.push(obj);
+      });
+      this.paraArr = pararArr;
+      console.log("======paraArr======");
+      console.log(this.paraArr);
+    },
     //词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1) {
@@ -393,14 +475,38 @@ export default {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time / 1000);
     },
+    //处理数组
+    handlePara(para) {
+      para = para.trim();
+      para = para.replace(/\s+/g, " ");
+      para = para.replace(/_{2,}/g, "^ ");
+      let paraArr = para.split(/\s/g);
+      let resArr = [];
+      paraArr.forEach((item, index) => {
+        let obj = {
+          isHeng: false,
+          con: item,
+        };
+        if (item == "^") {
+          obj.isHeng = true;
+          obj.answer = "";
+        }
+        resArr.push(obj);
+      });
+      let isRecord = /^/g.test(para);
+      return { wordsList: resArr, isRecord: isRecord };
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-   
     if (this.curQue) {
-      this.handleData();
+      if (this.curQue.font == "cn" || !this.curQue.font) {
+        this.handleData();
+      } else {
+        this.handlePYData();
+      }
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -613,7 +719,6 @@ export default {
           line-height: 22px;
           color: rgba(0, 0, 0, 0.85);
           margin-right: 4px;
-          margin-left: 8px;
         }
         .chs {
           font-family: "FZJCGFKTK";
@@ -656,5 +761,12 @@ export default {
       padding-top: 44px;
     }
   }
+  .NNPE-para-pinyin {
+    font-weight: normal;
+    font-size: 20px;
+    line-height: 28px;
+    color: #000000;
+    height: 28px;
+  }
 }
 </style>

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

@@ -1,36 +1,117 @@
 <!--  -->
 <template>
-  <div class="dialogue-answer-view">
+  <div class="dialogue-answer-view NPC-zhedie">
     <!-- 标题 -->
-    <div class="dialogue-answer-title">{{ curQue.title }}</div>
-    <div class="dialogue-answer-content">
-      <div
-        class="dialogue-answer-inner"
-        v-for="(item, index) in curQue.list"
-        :key="'list' + index"
-      >
-        <span class="number">{{ item.number }}</span>
-        <template>
-          <img src="" alt="" srcset="" />
-        </template>
-        <template>
-          <AnswerModel
-            :curQue="item"
-            :pyPosition="curQue.pyPosition"
-            :colorBox="colorBox"
-          />
-        </template>
-        <template
-          v-if="
-            curQue.option &&
-            curQue.option.length > 0 &&
-            curQue.option[index].detail
-          "
+    <template v-if="curQue.title">
+      <el-collapse v-model="wordShow" @change="handleChange">
+        <el-collapse-item name="1">
+          <template #title>
+            <div class="topTitle">
+              <div class="NPC-top-left">
+                <span class="NPC-topTitle-text">{{ curQue.title }}</span>
+              </div>
+              <div class="NPC-top-right">
+                <span class="NPC-top-right-text">{{
+                  wordShow.indexOf("1") != -1 ? "收起" : "展开"
+                }}</span>
+                <img
+                  v-if="wordShow.indexOf('1') != -1"
+                  src="../../../../assets/NPC/down.png"
+                  alt=""
+                />
+                <img
+                  v-else
+                  class="rotate"
+                  src="../../../../assets/NPC/down.png"
+                  alt=""
+                />
+              </div>
+            </div>
+          </template>
+
+          <div :class="['dialogue-answer-content']">
+            <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+            <div
+              :class="[
+                'dialogue-answer-inner',
+                curQue.option &&
+                curQue.option.length > 0 &&
+                curQue.option[index].detail &&
+                curQue.option[index].detail.length > 0
+                  ? 'hasoption'
+                  : '',
+                index == curQue.list.length - 1 ? 'haspadding' : '',
+              ]"
+              v-for="(item, index) in curQue.list"
+              :key="'list' + index"
+            >
+              <span class="number" v-if="item.number">{{ item.number }}</span>
+              <div
+                class="dialogue-img"
+                v-if="item.img_list && item.img_list.length > 0"
+              >
+                <el-image
+                  style="width: 196px; height: 164px"
+                  :src="item.img_list[0].id"
+                  fit="scale-down"
+                ></el-image>
+              </div>
+
+              <div class="dialogue-answer-model">
+                <AnswerModel
+                  :curQue="item"
+                  :pyPosition="curQue.pyPosition"
+                  :colorBox="colorBox"
+                />
+              </div>
+              <template
+                v-if="
+                  curQue.option &&
+                  curQue.option.length > 0 &&
+                  curQue.option[index].detail &&
+                  curQue.option[index].detail.length > 0
+                "
+              >
+                <OptionModel :curOption="curQue.option[index]" :index="index" />
+              </template>
+            </div>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </template>
+    <template v-else>
+      <div class="dialogue-answer-content">
+        <div class="guide" v-if="curQue.guide">{{ curQue.guide }}</div>
+        <div
+          class="dialogue-answer-inner"
+          v-for="(item, index) in curQue.list"
+          :key="'list' + index"
         >
-          <OptionModel :curOption="curQue.option[index]" />
-        </template>
+          <span class="number" v-if="item.number">{{ item.number }}</span>
+          <template>
+            <img src="" alt="" srcset="" />
+          </template>
+
+          <div class="dialogue-answer-model">
+            <AnswerModel
+              :curQue="item"
+              :pyPosition="curQue.pyPosition"
+              :colorBox="colorBox"
+            />
+          </div>
+          <template
+            v-if="
+              curQue.option &&
+              curQue.option.length > 0 &&
+              curQue.option[index].detail &&
+              curQue.option[index].detail.length > 0
+            "
+          >
+            <OptionModel :curOption="curQue.option[index]" :index="index" />
+          </template>
+        </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -54,12 +135,16 @@ export default {
   },
   props: ["curQue", "colorBox"],
   data() {
-    return {};
+    return {
+      wordShow: ["1"],
+    };
   },
   computed: {},
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    handleChange() {},
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -80,5 +165,75 @@ export default {
 //@import url(); 引入公共css类
 .dialogue-answer-view {
   width: 100%;
+  .guide {
+    width: 100%;
+    font-size: 16px;
+    line-height: 19px;
+    font-family: "robot";
+    padding-top: 24px;
+  }
+  .dialogue-answer-content {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0px 24px 0 24px;
+    &.nooption {
+      padding-bottom: 40px;
+    }
+  }
+  .dialogue-answer-inner {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 16px 0 0px 0;
+    &.hasoption {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding-bottom: 24px;
+    }
+    &.haspadding {
+      padding-bottom: 40px;
+    }
+    &:nth-last-child(1) {
+      border: 0;
+    }
+    .number {
+      width: 32px;
+      height: 32px;
+      background: #e35454;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 150%;
+      color: #ffffff;
+      font-family: "robot";
+      margin-top: 8px;
+    }
+  }
+  .dialogue-answer-model {
+    flex: 1;
+  }
+  .dialogue-answer-article {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .dialogue-img {
+    width: 228px;
+    height: 196px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 16px;
+    overflow: hidden;
+    margin-left: 24px;
+    margin-top: 8px;
+    > img {
+      width: 100%;
+    }
+  }
 }
 </style>

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

@@ -1,16 +1,24 @@
 <!--  -->
 <template>
-  <div class="dialogue-option" v-if="curOption">
-    <div v-for="(item, index) in curOption.detail" :key="'curOption' + index">
+  <div
+    :class="['dialogue-option', index % 2 == 0 ? 'pink-bg' : 'blue-bg']"
+    v-if="curOption"
+  >
+    <div
+      :class="['left-icon', index % 2 == 0 ? 'pink-left' : 'blue-left']"
+    ></div>
+    <div
+      class="dialogue-option-con"
+      v-for="(item, index) in resArr"
+      :key="'curOption' + index"
+    >
       <span
-        v-for="(wItem, wIndex) in item.wordsList"
-        :key="'wordsList' + wIndex"
+        class="sentence"
+        v-for="(wItem, wIndex) in item"
+        :key="'curOption_word' + wIndex"
       >
-        <span
-          v-for="(wItem, wIndex) in item.wordsList"
-          :key="'wordsList' + wIndex"
-        >
-        </span>
+        <span class="NNPE-pinyin padding">{{ wItem.pinyin }}</span>
+        <span class="NNPE-chs padding">{{ wItem.chs }}</span>
       </span>
     </div>
   </div>
@@ -19,7 +27,7 @@
 <script>
 export default {
   components: {},
-  props: ["curOption"],
+  props: ["curOption", "index"],
   data() {
     return {
       bgList: [
@@ -32,6 +40,7 @@ export default {
           bgLeft: require("../../../../assets/NPC/op-blue-left.png"),
         },
       ],
+      resArr: [],
     };
   },
   computed: {},
@@ -39,7 +48,22 @@ export default {
   //方法集合
   methods: {
     handleData() {
-      this.curOption.detail.forEach((item) => {});
+      let resArr = [];
+      this.curOption.detail.forEach((dItem) => {
+        dItem.wordsList.forEach((sItem) => {
+          let sentArr = [];
+          sItem.forEach((wItem) => {
+            let obj = {
+              chs: wItem.chs,
+              pinyin: wItem.pinyin,
+            };
+            sentArr.push(obj);
+          });
+          resArr.push(sentArr);
+        });
+      });
+      this.resArr = resArr;
+      console.log(this.resArr);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -48,6 +72,9 @@ export default {
   mounted() {
     console.log("curOption");
     console.log(this.curOption);
+    if (this.curOption) {
+      this.handleData();
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -60,4 +87,81 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
+.dialogue-option {
+  position: relative;
+  width: 256px;
+  height: 256px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 16px;
+  &.pink-bg {
+    background: url("../../../../assets/NPC/op-pink-bg.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
+  &.blue-bg {
+    background: url("../../../../assets/NPC/op-blue-bg.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
+  .left-icon {
+    position: absolute;
+    left: -16px;
+    top: -16px;
+    z-index: 9999;
+    &.pink-left {
+      width: 44px;
+      height: 54px;
+      background: url("../../../../assets/NPC/op-pink-left.png") no-repeat left
+        top;
+      background-size: 100% 100%;
+    }
+    &.blue-left {
+      width: 82px;
+      height: 68px;
+      background: url("../../../../assets/NPC/op-blue-left.png") no-repeat left
+        top;
+      background-size: 100% 100%;
+    }
+  }
+  .dialogue-option-con {
+    clear: both;
+    overflow: hidden;
+    margin-bottom: 8px;
+    .sentence {
+      float: left;
+      text-align: center;
+      > span {
+        display: block;
+        &.NNPE-pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-weight: normal;
+          font-size: 14px;
+          line-height: 22px;
+          color: #000000;
+          height: 21px;
+
+          &.textLeft {
+            text-align: left;
+          }
+        }
+        &.NNPE-chs {
+          font-family: "FZJCGFKTK";
+          font-size: 24px;
+          line-height: 32px;
+          color: #000000;
+          &.active {
+            background: rgba(60, 200, 99, 0.2);
+          }
+          &.wordActive {
+            color: #de4444;
+          }
+        }
+        &.padding {
+          padding: 0 3px;
+        }
+      }
+    }
+  }
+}
 </style>

src/components/Adult/preview/WordPhrase.vue

@@ -368,58 +368,6 @@ export default {
 .NPC-zhedie {
   width: 780px;
   margin-top: 16px;
-  .topTitle {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding-left: 24px;
-    padding-right: 16px;
-    .NPC-top-left {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      .NPC-topTitle-text {
-        font-family: "sourceR";
-        font-size: 16px;
-        color: #fff;
-        font-weight: bold;
-        margin-right: 8px;
-      }
-      .NPC-play-all {
-        width: 24px;
-        height: 24px;
-        background: url("../../../assets/NPC/play-white.png") no-repeat left top;
-        background-size: 100% 100%;
-        cursor: pointer;
-        &.active {
-          background: url("../../../assets/NPC/play-white-gif.png") no-repeat
-            left top;
-          background-size: 100% 100%;
-        }
-      }
-    }
-    .NPC-top-right {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      &-text {
-        font-weight: normal;
-        font-size: 14px;
-        line-height: 16px;
-        color: #ffffff;
-      }
-    }
-    img {
-      width: 24px;
-      height: 24px;
-    }
-    .rotate {
-      animation-name: firstrotate;
-      animation-direction: 2s;
-      animation-fill-mode: both;
-      animation-timing-function: linear;
-    }
-  }
   .NPC-word-table {
     width: 100%;
     > .NPC-word-tr {
@@ -511,6 +459,58 @@ export default {
 </style>
 <style lang="scss">
 .NPC-zhedie {
+  .topTitle {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-left: 24px;
+    padding-right: 16px;
+    .NPC-top-left {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .NPC-topTitle-text {
+        font-family: "sourceR";
+        font-size: 16px;
+        color: #fff;
+        font-weight: bold;
+        margin-right: 8px;
+      }
+      .NPC-play-all {
+        width: 24px;
+        height: 24px;
+        background: url("../../../assets/NPC/play-white.png") no-repeat left top;
+        background-size: 100% 100%;
+        cursor: pointer;
+        &.active {
+          background: url("../../../assets/NPC/play-white-gif.png") no-repeat
+            left top;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .NPC-top-right {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      &-text {
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 16px;
+        color: #ffffff;
+      }
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
+    .rotate {
+      animation-name: firstrotate;
+      animation-direction: 2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+    }
+  }
   .el-collapse-item__content {
     padding-bottom: 0;
   }