生词

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -1,6 +1,13 @@
 <template>
   <ModuleBase :type="data.type">
     <template #content>
+      <label>标题：</label>
+      <RichText
+        v-model="data.title_con"
+        :inline="true"
+        :placeholder="'输入标题'"
+        toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+      />
       <el-table :data="data.option" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">
@@ -160,28 +167,16 @@ export default {
         content_type: 'FILE',
         file_id: this.data.lrc_data.file_id,
       }).then(({ lrc_list }) => {
-        this.data.lrc_arr = lrc_list;
-        this.distribution();
-        loading.close();
-      });
-    },
-    /**
-     * 分配标记
-     */
-    distribution() {
-      const lrcArr = this.data.lrc_arr;
-      if (lrcArr.length === 0) {
-        return this.$message.warning('没有标记可分配');
-      }
-      let curIndex = 0;
-      this.data.option_list.forEach((row) => {
-        row.forEach((item, i) => {
-          const lrcData = lrcArr[curIndex];
-          if (lrcData) {
-            row[i].lrc_data = lrcData;
-            curIndex += 1;
-          }
+        let lrc_list_res = [];
+        lrc_list.forEach((item) => {
+          let obj = {
+            bg: item.begin_time,
+            ed: item.end_time,
+          };
+          lrc_list_res.push(obj);
         });
+        this.data.lrc_arr = lrc_list_res;
+        loading.close();
       });
     },
     uploadLrcSuccess(fileList) {
@@ -229,6 +224,7 @@ export default {
           file_id: '',
         };
       }
+      this.data.lrc_arr = [];
     },
     uploads(file_id, index) {
       this.data.option[index].mp3_list = file_id;

src/views/book/courseware/create/components/question/new_word/NewWordSetting.vue

@@ -2,6 +2,21 @@
   <div>
     <el-form :model="property" label-width="72px" label-position="left">
       <SerailNumber :property="property" />
+      <el-form-item label="详细信息">
+        <el-radio-group v-model="property.is_has_infor">
+          <el-radio v-for="{ value, label } in inforList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="预览展开">
+        <el-radio-group v-model="property.is_word_show">
+          <el-radio v-for="{ value, label } in wordShowList" :key="value" :label="value">
+            {{ label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
       <el-form-item label="读音">
         <el-select v-model="property.audio_generation_method" placeholder="请选择">
           <el-option v-for="{ value, label } in audioGenerationMethodList" :key="value" :label="label" :value="value" />
@@ -26,6 +41,8 @@ import {
   getNewWordProperty,
   audioGenerationMethodList,
   pinyinPositionList,
+  wordShowList,
+  inforList,
 } from '@/views/book/courseware/data/newWord';
 
 export default {
@@ -36,6 +53,8 @@ export default {
       property: getNewWordProperty(),
       audioGenerationMethodList,
       pinyinPositionList,
+      wordShowList,
+      inforList,
     };
   },
   methods: {},

src/views/book/courseware/data/bookType.js

@@ -236,14 +236,14 @@ export const bookTypeOption = [
         set: RecordInputSetting,
         preview: RecordInputPreview,
       },
-      // {
-      //   value: 'new_word',
-      //   label: '生词组件',
-      //   icon: '',
-      //   component: NewWord,
-      //   set: NewWordSetting,
-      //   preview: NewWordPreview,
-      // },
+      {
+        value: 'new_word',
+        label: '生词组件',
+        icon: '',
+        component: NewWord,
+        set: NewWordSetting,
+        preview: NewWordPreview,
+      },
       {
         value: 'notes',
         label: '注释组件',

src/views/book/courseware/data/newWord.js

@@ -9,6 +9,16 @@ import {
 
 export { arrangeTypeList, switchOption, isEnable };
   
+export const wordShowList = [
+  { value: 'true', label: '是' },
+  { value: 'false', label: '否' },
+];
+
+export const inforList = [
+  { value: 'true', label: '有' },
+  { value: 'false', label: '没有' },
+];
+
 // 拼音位置
 export const pinyinPositionList = [
   { value: 'front', label: '前面' },
@@ -52,7 +62,9 @@ export function getNewWordProperty() {
     sn_position: serialNumberPositionList[0].value,
     sn_display_mode: displayList[0].value,
     audio_generation_method: audioGenerationMethodList[0].value,
-    pinyin_position: pinyinPositionList[0].value
+    pinyin_position: pinyinPositionList[0].value,
+    is_word_show: wordShowList[1].value,
+    is_has_infor: inforList[0].value
   };
 }
 
@@ -61,6 +73,7 @@ export function getNewWordData() {
     type: 'new_word',
     title: '生词组件',
     property: getNewWordProperty(),
+    title_con:'',
     option: [
       getOption()
     ],
@@ -80,5 +93,8 @@ export function getNewWordData() {
       url: '',
       file_id: '',
     },
+    answer: {
+      answer_list:[]
+    },
   };
 }

src/views/book/courseware/data/notes.js

@@ -9,7 +9,6 @@ import {
 
 export { arrangeTypeList, switchOption, isEnable };
   
-// 拼音位置
 export const wordShowList = [
   { value: 'true', label: '是' },
   { value: 'false', label: '否' },

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1,14 +1,171 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="select-preview" :style="getAreaStyle()">
+  <div class="newWord-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main">预览开发中</div>
+    <div class="main" v-if="data">
+      <div class="NPC-zhedie">
+        <div class="topTitle">
+          <div class="NPC-top-left">
+            <span class="NPC-topTitle-text" v-html="data.title_con"></span>
+          </div>
+          <div class="NPC-top-right" @click="handleChangeTab">
+            <span class="NPC-top-right-text">{{ wordShow ? '收起' : '展开' }}</span>
+            <img v-if="wordShow" src="@/assets/down.png" alt="" />
+            <img v-else class="rotate" src="@/assets/down.png" alt="" />
+          </div>
+        </div>
+        <el-collapse-transition>
+          <div class="NPC-word-list" v-if="data.option && data.option.length > 0" v-show="wordShow">
+            <!-- <div
+          class="aduioLine-box"
+          v-if="
+            curQue.mp3_list &&
+              curQue.mp3_list.length > 0 &&
+              curQue.mp3_list[0].id
+          "
+        >
+          <AudioLine
+            :audioId="'SelectYinjieAudio' + indexStr"
+            :mp3="curQue.mp3_list[0].id"
+            :getCurTime="getCurTime"
+            :themeColor="themeColor"
+            :ed="ed"
+            type="audioLine"
+            ref="audioLine"
+            @handleListenRead="handleListenRead"
+          />
+        </div> -->
+            <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
+              <li class="NPC-word-tr" v-for="(item, index) in data.option_list" :key="'curQue.option' + index">
+                <div
+                  :class="[
+                    'NPC-word-row',
+                    playClass && mp3_index == sItem.sIndex ? 'active' : '',
+                    curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '',
+                  ]"
+                  v-for="(sItem, sIndex) in item"
+                  :key="'curQue.option.child' + sIndex"
+                >
+                  <template v-if="sItem.bg || sItem.ed">
+                    <a
+                      :class="['play-btn', curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '']"
+                      @click="handleChangeTime(sItem.bg, sItem.ed)"
+                    ></a>
+                  </template>
+                  <template v-else-if="sItem.mp3_list && sItem.mp3_list.length > 0 && sItem.mp3_list[0].id">
+                    <span
+                      :class="['NPC-play-btn-brown', playClass && mp3_index == sItem.sIndex ? 'active' : '']"
+                      @click="palyAudio(sItem.sIndex)"
+                    ></span>
+                    <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list[0].id"></audio>
+                  </template>
+
+                  <template v-else>
+                    <span style="width: 16px; height: 16px"></span>
+                  </template>
+                  <div class="tabNum-box">
+                    <template v-if="sItem.mIndex == 0">
+                      <b class="tabNum">{{ index + 1 }}</b>
+                    </template>
+                    <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
+                  </div>
+                  <template v-if="sItem.pinyin_site && (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')">
+                    <div class="NPC-word-tab-box">
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-pinyin"
+                        v-if="sItem.pinyin_site == 'top'"
+                        v-html="sItem.pinyin"
+                      >
+                      </span>
+                      <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-pinyin"
+                        v-if="sItem.pinyin_site == 'bottom'"
+                        v-html="sItem.pinyin"
+                      >
+                      </span>
+                    </div>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-cixing"
+                      :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
+                      v-html="sItem.cixing"
+                    ></span>
+                    <span class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></span>
+                  </template>
+                  <template v-else>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
+                      v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
+                      v-html="sItem.pinyin"
+                    >
+                    </span>
+                    <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
+                      v-if="sItem.pinyin_site == 'last'"
+                      v-html="sItem.pinyin"
+                    >
+                    </span>
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-cixing"
+                      :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
+                      v-html="sItem.cixing"
+                    ></span>
+                    <span class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></span>
+                  </template>
+                  <span>
+                    <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
+                    <SoundRecord
+                      :tmIndex="index"
+                      :tmsIndex="sIndex"
+                      :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+                      @handleWav="handleWav"
+                      :answerRecordList="[]"
+                      type="mini"
+                      class="luyin-box-wordphrase"
+                      :style="{ marginLeft: '8px' }"
+                    />
+                  </span>
+                  <span v-if="isEnable(data.property.is_has_infor)">
+                    <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
+                  </span>
+                  <div v-if="sItem.collocation" class="collocation">
+                    <span>搭配：</span><b v-html="sItem.collocation"></b>
+                  </div>
+                  <div v-if="sItem.liju_list" class="collocation">
+                    <span>例句：</span>
+                    <div>
+                      <b v-html="sItem.liju_list"></b>
+                    </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-collapse-transition>
+        <!-- <div class="practiceBox" v-if="detailShow">
+      <WordPhraseDetail
+        :data="data"
+        :changeDetailIndex="changeDetailIndex"
+        :closeWord="closeWordShow"
+        :detailIndex="detailIndex"
+        :optionRes="optionRes"
+        :themeColor="themeColor"
+        :currentTreeID="currentTreeID"
+        :bg="data && data.bg ? data.bg : null"
+        :ed="data && data.ed ? data.ed : null"
+        type="newWordDetail"
+      />
+    </div> -->
+        <audio ref="newwordAudio" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { getNewWordData } from '@/views/book/courseware/data/newWord';
+import { getNewWordData, isEnable } from '@/views/book/courseware/data/newWord';
 
 import PreviewMixin from '../common/PreviewMixin';
 import AudioFill from '../fill/components/AudioFillPlay.vue';
@@ -24,86 +181,684 @@ export default {
   data() {
     return {
       data: getNewWordData(),
+      wordShow: false,
+      dataWord: null,
+      detailShow: false,
+      detailIndex: 0,
+      audio: new Audio(),
+      playClass: '',
+      mp3_index: -1,
+      playWord: null,
+      optionRes: [],
+      mp3List: [],
+      isSuccess: false,
+      loading: false,
+      mp3: '',
+      curTime: 0,
+      stopAudioS: false,
+      ed: null,
+      indexStr: Math.random().toString(36).substring(2, 10),
+      is_change: false,
     };
   },
+  watch: {
+    data: {
+      handler(val) {
+        if (val) {
+          if (this.is_change) return;
+          if (val.option[0].new_word) {
+            this.wordShow = isEnable(this.data.property.is_word_show);
+            this.initData();
+          }
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   computed: {},
-  created() {
-    // this.answer.answer_list = this.data.model_essay
-    //   .map((item) => {
-    //     return item
-    //       .map(({ type, content, mark }) => {
-    //         if (type === 'input') {
-    //           return {
-    //             value: content,
-    //             mark,
-    //           };
-    //         }
-    //       })
-    //       .filter((item) => item);
-    //   })
-    //   .flat();
+  created() {},
+  methods: {
+    handleChange(val) {},
+    palyAudio(sIndex) {
+      this.stopAudio();
+      let node = document.getElementById('word' + this.indexStr + sIndex);
+      let mp3 = node.src;
+      let audio = document.getElementsByTagName('audio');
+      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+        audio.forEach((item) => {
+          if (item.src != mp3) {
+            item.pause();
+          }
+        });
+      }
+      this.playWord = node;
+      if (node) {
+        this.mp3_index = sIndex;
+        node.play();
+      }
+      this.handleListenPlay(sIndex);
+    },
+    handleListenPlay(sIndex) {
+      if (this.playWord) {
+        this.playWord.addEventListener('play', function () {
+          this.playClass = 'nn';
+        });
+        this.playWord.addEventListener('pause', function () {
+          this.mp3_index = -1;
+          this.playClass = '';
+        });
+        this.playWord.addEventListener('ended', function () {
+          this.mp3_index = -1;
+          this.playClass = '';
+        });
+      }
+    },
+    // 打开单词详情
+    showDetail(item) {
+      this.dataWord = null;
+      this.dataWord = item;
+      this.detailShow = true;
+      this.detailIndex = item.sIndex;
+    },
+
+    // 关闭单词详情
+    closeWordShow(val) {
+      this.detailShow = val;
+    },
+    changeDetailIndex(val) {
+      if (val == 'last') {
+        this.detailIndex--;
+      } else {
+        this.detailIndex++;
+      }
+      this.dataWord = null;
+      this.dataWord = this.optionRes[this.detailIndex];
+      //this.getWordLiju(this.data.new_word);
+    },
+
+    playNewwords() {
+      let _this = this;
+      if (this.playWord) {
+        this.playWord.pause();
+      }
+      if (this.playClass) {
+        this.$refs.newwordAudio.pause();
+        // this.mp3_index = -1;
+        this.playClass = '';
+      } else {
+        let mp3_index = this.mp3_index == -1 ? 0 : this.mp3_index;
+        let leg = this.mp3List.length;
+        let mp3 = this.mp3List[mp3_index].mp3_list[0].id;
+        this.mp3_index = this.mp3List[mp3_index].sIndex;
+        this.handlePlayVoice(mp3);
+        this.$refs.newwordAudio.addEventListener('ended', function () {
+          setTimeout(() => {
+            if (_this.playClass != 'nn') {
+              if (mp3_index < leg - 1) {
+                if (_this.playClass) {
+                  mp3_index = mp3_index + 1;
+                  _this.mp3_index = _this.mp3List[mp3_index].sIndex;
+                  mp3 = _this.mp3List[mp3_index].mp3_list.length > 0 && _this.mp3List[mp3_index].mp3_list[0].id;
+                  if (mp3) {
+                    _this.handlePlayVoice(mp3);
+                  }
+                }
+              } else {
+                _this.mp3_index = -1;
+                _this.playClass = '';
+              }
+            }
+          }, 1000);
+        });
+      }
+    },
+    handlePlayVoice3(mp3) {
+      let audio = document.getElementsByTagName('audio');
+      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+        audio.forEach((item) => {
+          if (item.src != mp3) {
+            item.pause();
+          }
+        });
+      }
+      if (!mp3) {
+        return;
+      }
+      if (!this.audio.paused) {
+        this.audio.pause();
+      } else {
+        this.audio.pause();
+        this.audio.load();
+        this.audio.src = mp3;
+        this.audio.loop = false;
+        this.audio.play();
+      }
+    },
+    handlePlayVoice(mp3) {
+      let audio = document.getElementsByTagName('audio');
+      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+        audio.forEach((item) => {
+          if (item.src != mp3) {
+            item.pause();
+          }
+        });
+      }
+      if (!mp3) {
+        return;
+      }
+      // setTimeout(() => {
+      //this.$refs.newwordAudio.pause();
+      this.$refs.newwordAudio.src = mp3;
+      //this.$refs.newwordAudio.load();
+      this.$refs.newwordAudio.play();
+      // }, 1000);
+    },
+    stopAudio() {
+      this.$refs.newwordAudio.pause();
+    },
+    initData() {
+      this.is_change = true;
+      let resIndex = 0;
+      let optionRes = [];
+      let mp3List = [];
+      let itemNumber = 0;
+      let Bookanswer = [];
+      let option_list = [];
+      this.data.option.forEach((item) => {
+        if (item.number) {
+          option_list.push([item]);
+        } else {
+          if (option_list[option_list.length - 1]) {
+            option_list[option_list.length - 1].push(item);
+          } else {
+            option_list.push([item]);
+          }
+        }
+      });
+      option_list.forEach((item, index) => {
+        optionRes = optionRes.concat(item);
+        Bookanswer.push([]);
+        item.forEach((sItem, sIndex) => {
+          sItem.mIndex = sIndex;
+          sItem.sIndex = resIndex;
+          resIndex++;
+          sItem.def_str = sItem.definition_list;
+          if (sItem.mp3_list[0]) {
+            mp3List.push(sItem);
+          }
+          if (this.data.lrc_arr && this.data.lrc_arr[itemNumber]) {
+            sItem.bg = this.data.lrc_arr[itemNumber].bg;
+            sItem.ed = this.data.lrc_arr[itemNumber].ed;
+          }
+          itemNumber++;
+          Bookanswer[index].push({
+            recordList: [],
+          });
+        });
+      });
+      this.optionRes = JSON.parse(JSON.stringify(optionRes));
+      this.$set(this.data, 'option_list', option_list);
+      this.mp3List = mp3List;
+      if (!this.isJudgingRightWrong) {
+        this.data.answer.answer_list = Bookanswer;
+      }
+    },
+    handleChangeTab() {
+      this.wordShow = !this.wordShow;
+    },
+    getCurTime(curTime) {
+      this.curTime = curTime * 1000;
+    },
+    //点击播放某个句子
+    handleChangeTime(time, edTime) {
+      this.curTime = time;
+      this.stopAudioS = true;
+      this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
+      this.ed = edTime;
+    },
+    handleListenRead(playFlag) {
+      this.stopAudioS = playFlag;
+    },
+    emptyEd() {
+      this.ed = null;
+    },
+    handleWav(list, tmIndex, tmsIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      tmsIndex = tmsIndex ? tmsIndex : 0;
+      this.$set(this.data.answer.answer_list[tmIndex][tmsIndex], 'recordList', list);
+    },
   },
-  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.select-preview {
+.newWord-preview {
   @include preview-base;
 
-  .main {
-    display: grid;
-    align-items: center;
+  .NPC-zhedie {
+    width: 780px;
+    margin-bottom: 24px;
+
+    .aduioLine-box {
+      margin-bottom: 8px;
+    }
+
+    .practiceBox {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 999;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      overflow-y: auto;
+      background: rgba(0, 0, 0, 19%);
+    }
+
+    .NPC-word-list {
+      background: #f7f7f7;
+    }
+
+    .NPC-word-table {
+      width: 100%;
+
+      :deep p {
+        margin: 0;
+      }
+
+      > .NPC-word-tr {
+        margin-bottom: 8px;
+        background: #fff;
+        border-radius: 8px;
+
+        .NPC-word-row {
+          display: flex;
+          flex-flow: wrap;
+          justify-content: flex-start;
+          padding: 8px 13px 8px 12px;
+          cursor: pointer;
+          border-radius: 8px;
+
+          &.active {
+            background: linear-gradient(0deg, rgba(0, 0, 0, 8%), rgba(0, 0, 0, 8%)), #fff;
+          }
+
+          > span {
+            font-size: 16px;
+            line-height: 150%;
+            color: #000;
+          }
+        }
+
+        .tabNum-box {
+          position: relative;
+
+          .star-label {
+            position: absolute;
+            top: 1px;
+            right: -6px;
+            width: 6px;
+            height: 6px;
+          }
+        }
+
+        .tabNum {
+          display: block;
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+          margin-left: 8px;
+          font-family: 'robot', 'alabo';
+          font-size: 12px;
+          line-height: 16px;
+          color: #fff;
+          text-align: center;
+          background: #de4444;
+          border-radius: 50%;
+        }
+
+        .NPC-word-tab-box {
+          width: 240px;
+
+          span {
+            display: block;
+            width: 100%;
+            margin: 2px 0;
+            color: #000;
+          }
+        }
+
+        .NPC-word-tab-common {
+          box-sizing: border-box;
+          width: 125px;
+          padding-left: 8px;
+        }
+
+        .NPC-word-tab-pinyin {
+          font-family: 'GB-PINYINOK-B';
+
+          // white-space: nowrap;
+          font-size: 12px;
+          word-break: break-word;
+
+          &.NPC-word-tab-pinyin-red {
+            color: #e35454;
+          }
+
+          &.NPC-word-tab-pinyin-green {
+            color: #24b99e;
+          }
+
+          &.NPC-word-tab-pinyin-brown {
+            color: #bd8865;
+          }
+        }
+
+        .NPC-word-tab-word {
+          font-family: 'FZJCGFKTK';
+          font-size: 16px;
+          white-space: nowrap;
+
+          &.NPC-word-tab-word-red {
+            color: #e35454;
+          }
+
+          &.NPC-word-tab-word-green {
+            color: #24b99e;
+          }
+
+          &.NPC-word-tab-word-brown {
+            color: #bd8865;
+          }
+
+          &-break {
+            word-break: break-word;
+            white-space: normal;
+          }
+        }
+
+        .NPC-word-tab-cixing {
+          box-sizing: border-box;
+
+          // width: 48px;
+          width: 60px;
+          font-family: 'robot', 'alabo';
+          text-align: left;
+          word-break: break-word;
+
+          // font-style: italic;  // 要求改为正体
+          &.NPC-word-tab-cixing-red {
+            color: #e35454;
+          }
+
+          &.NPC-word-tab-cixing-green {
+            color: #24b99e;
+          }
+
+          &.NPC-word-tab-cixing-brown {
+            color: #bd8865;
+          }
+
+          &.hasCn {
+            font-size: 13px;
+          }
+        }
+
+        .NPC-word-tab-def {
+          box-sizing: border-box;
+          flex: 1;
+          font-family: 'robot', 'alabo';
+          word-break: break-word;
+          white-space: pre-wrap;
+
+          &.NPC-word-tab-def-red {
+            color: #e35454;
+          }
+
+          &.NPC-word-tab-def-green {
+            color: #24b99e;
+          }
+
+          &.NPC-word-tab-def-brown {
+            color: #bd8865;
+          }
+        }
+
+        .collocation {
+          display: flex;
+          width: 100%;
+          padding-top: 8px;
+
+          > span {
+            flex-shrink: 0;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px;
+            color: #000;
+          }
+
+          > div b {
+            display: block;
+          }
+
+          > b,
+          > div b {
+            flex: 1;
+            font-family: 'robot', 'FZJCGFKTK', 'alabo';
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 24px;
+            color: rgba(0, 0, 0, 65%);
+          }
+        }
+      }
+    }
+
+    .NPC-word-list {
+      padding: 20px 24px;
+      border: 1px solid rgba(0, 0, 0, 10%);
+      border-top: none;
+      border-radius: 0 0 8px 8px;
+    }
+
+    .detail-icon {
+      display: block;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      opacity: 0.5;
+    }
   }
 
-  .fill-wrapper {
-    grid-area: fill;
-    font-size: 16pt;
+  @keyframes firstrotate {
+    0% {
+      transform: rotateZ(0deg);
+    }
+
+    100% {
+      transform: rotateZ(180deg);
+    }
+  }
 
-    p {
-      margin: 0;
+  @keyframes huifuRotate {
+    0% {
+      transform: rotateZ(180deg);
     }
 
-    .el-input {
-      display: inline-flex;
+    100% {
+      transform: rotateZ(0deg);
+    }
+  }
+
+  .luyin-box-wordphrase {
+    height: 24px;
+  }
+}
+</style>
+<style lang="scss">
+.NPC-zhedie {
+  .topTitle {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 48px;
+    padding-right: 16px;
+    padding-left: 24px;
+    overflow: hidden;
+    background: #e35454;
+    border: 1px solid rgba(0, 0, 0, 10%);
+    border-radius: 8px 8px 0 0;
+
+    .NPC-top-left {
+      display: flex;
       align-items: center;
-      width: 120px;
-      margin: 0 2px;
+      justify-content: flex-start;
 
-      &.pinyin :deep input.el-input__inner {
-        font-family: 'PINYIN-B', sans-serif;
+      .NPC-topTitle-text {
+        margin-right: 8px;
+        font-family: 'sourceR';
+        font-size: 16px;
+        font-weight: bold;
+        color: #fff;
+        white-space: pre;
       }
+    }
 
-      &.chinese :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
+    .NPC-top-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
 
-      &.english :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
+      &-text {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #fff;
       }
 
-      :deep input.el-input__inner {
-        padding: 0;
-        font-size: 16pt;
-        color: $font-color;
-        text-align: center;
-        background-color: #fff;
-        border-width: 0;
-        border-bottom: 1px solid $font-color;
-        border-radius: 0;
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
       }
     }
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    .rotate {
+      animation-name: firstrotate;
+      animation-timing-function: linear;
+      animation-direction: 2s;
+      animation-fill-mode: both;
+    }
   }
 
-  .record-box {
-    padding: 6px 12px;
-    background-color: $fill-color;
+  .topTitleWhite {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 48px;
+    padding-right: 16px;
+    padding-left: 24px;
+    overflow: hidden;
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 10%);
+    border-radius: 8px 8px 0 0;
 
-    :deep .record-time {
-      width: 100px;
+    .NPC-top-left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+
+      .NPC-topTitle-text {
+        margin-right: 8px;
+        font-family: 'sourceR';
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+      }
     }
+
+    .NPC-top-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      cursor: pointer;
+
+      &-text {
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 16px;
+        color: #000;
+      }
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+      }
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    .rotate {
+      animation-name: firstrotate;
+      animation-timing-function: linear;
+      animation-direction: 2s;
+      animation-fill-mode: both;
+    }
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+
+  .el-slider__button {
+    width: 8px;
+    height: 8px;
+  }
+
+  .el-slider__runway {
+    padding: 0;
+    margin: 0;
+  }
+
+  .el-slider {
+    position: relative;
+
+    // top: -3px;
+  }
+
+  .el-collapse {
+    box-sizing: border-box;
+    background: #f7f7f7;
+    border-radius: 8px;
+  }
+
+  .el-collapse-item__wrap {
+    background: #f7f7f7;
+    border: 1px solid rgba(0, 0, 0, 10%);
+    border-top: 0;
+    border-radius: 0 0 8px 8px;
+  }
+
+  .el-collapse-item__arrow {
+    display: none;
+  }
+
+  .el-table__row {
+    padding: 4px 0;
   }
 }
 </style>