生词详情

src/api/app.js

@@ -108,3 +108,7 @@ export async function fileUpload(
 export function GetStaticResources(MethodName, data) {
   return http.post(`/GCLSFileServer/ServiceInterface?MethodName=${MethodName}`, data);
 }
+
+export function GetBookWebSIContent (MethodName, data) {
+  return http.post(`/GCLSBookWebSI/ServiceInterface?MethodName=${MethodName}`, data);
+}

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

@@ -16,11 +16,7 @@
         </el-table-column>
         <el-table-column fixed prop="new_word" label="生词/短语" width="110">
           <template slot-scope="scope">
-            <RichText
-              v-model="scope.row.new_word"
-              :inline="true"
-              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-            />
+            <el-input v-model="scope.row.new_word"></el-input>
           </template>
         </el-table-column>
         <el-table-column prop="mp3_list" label="读音" width="200">
@@ -54,11 +50,7 @@
         </el-table-column>
         <el-table-column prop="pinyin" label="拼音" width="110">
           <template slot-scope="scope">
-            <RichText
-              v-model="scope.row.pinyin"
-              :inline="true"
-              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
-            />
+            <el-input v-model="scope.row.pinyin"></el-input>
           </template>
         </el-table-column>
         <el-table-column prop="cixing" label="词性" width="110">

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

@@ -62,22 +62,17 @@
                     </template>
                     <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
                   </div>
-                  <template
-                    v-if="
-                      data.property.pinyin_position &&
-                      (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
-                    "
-                  >
+                  <template v-if="sItem.pinyin_site && (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')">
                     <div class="NPC-word-tab-box">
                       <span
-                        v-if="data.property.pinyin_position == 'top'"
+                        v-if="sItem.pinyin_site == 'top'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
                       </span>
                       <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                       <span
-                        v-if="data.property.pinyin_position == 'bottom'"
+                        v-if="sItem.pinyin_site == 'bottom'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
@@ -92,14 +87,14 @@
                   </template>
                   <template v-else>
                     <span
-                      v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
+                      v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
                       class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
                     </span>
                     <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                     <span
-                      v-if="data.property.pinyin_position == 'back'"
+                      v-if="sItem.pinyin_site == 'last'"
                       class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
@@ -124,9 +119,9 @@
                       @handleWav="handleWav"
                     />
                   </span>
-                  <!-- <span v-if="isEnable(data.property.is_has_infor)">
+                  <span v-if="isEnable(data.property.is_has_infor)">
                     <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
-                  </span> -->
+                  </span>
                   <div v-if="sItem.collocation" class="collocation">
                     <span>搭配：</span><b v-html="sItem.collocation"></b>
                   </div>
@@ -141,20 +136,20 @@
             </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> -->
+        <div class="practiceBox" v-if="detailShow">
+          <WordPhraseDetail
+            :data="dataWord"
+            :changeDetailIndex="changeDetailIndex"
+            :closeWord="closeWordShow"
+            :detailIndex="detailIndex"
+            :optionRes="optionRes"
+            :themeColor="'red'"
+            :currentTreeID="courseware_id"
+            :bg="dataWord && dataWord.bg ? dataWord.bg : null"
+            :ed="dataWord && dataWord.ed ? dataWord.ed : null"
+            type="newWordDetail"
+          />
+        </div>
         <audio ref="newwordAudio"></audio>
       </div>
     </div>
@@ -168,15 +163,17 @@ import PreviewMixin from '../common/PreviewMixin';
 import SoundRecord from '../../common/SoundRecord.vue';
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
 import { GetFileURLMap } from '@/api/app';
+import WordPhraseDetail from './components/WordPhraseDetail.vue';
 
 export default {
   name: 'NewWordPreview',
   components: {
     SoundRecord,
     AudioLine,
+    WordPhraseDetail,
   },
   mixins: [PreviewMixin],
-  // inject: ['courseware_id'],
+  inject: ['courseware_id'],
   data() {
     return {
       data: getNewWordData(),
@@ -515,7 +512,7 @@ export default {
         }
 
         .NPC-word-tab-pinyin {
-          font-family: 'GB-PINYINOK-B';
+          font-family: 'League';
 
           // white-space: nowrap;
           font-size: 12px;
@@ -535,7 +532,7 @@ export default {
         }
 
         .NPC-word-tab-word {
-          font-family: 'FZJCGFKTK';
+          font-family: '楷体';
           font-size: 16px;
           white-space: nowrap;
 
@@ -624,7 +621,7 @@ export default {
           > b,
           > div b {
             flex: 1;
-            font-family: 'robot', 'FZJCGFKTK', 'alabo';
+            font-family: 'robot', '楷体', 'alabo';
             font-size: 16px;
             font-weight: 400;
             line-height: 24px;

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

@@ -0,0 +1,134 @@
+<!--  -->
+<template>
+  <div class="strockplay-redInner">
+    <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi">
+      <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
+    </div>
+    <div class="character-target-box">
+      <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+      <div :id="targetDiv" :ref="targetDiv" class="character-target-div"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetStaticResources } from '@/api/app';
+const HanziWriter = require('hanzi-writer');
+export default {
+  components: {},
+  props: ['targetDiv', 'Book_text', 'playStorkes', 'strokeColor', 'wordNum', 'themeColor'],
+  data() {
+    return {
+      writer: null,
+    };
+  },
+  computed: {},
+  watch: {
+    targetDiv: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      _this.writer = null;
+      //var ren = require("hanzi-writer-data/国");
+      _this.writer = HanziWriter.default.create(_this.targetDiv, _this.Book_text, {
+        charDataLoader: function (char, onComplete) {
+          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          let data = {
+            hz: char,
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            onComplete(res);
+          });
+        },
+        padding: 5,
+        showOutline: true,
+        strokeColor: _this.strokeColor ? _this.strokeColor : '#000',
+      });
+    },
+    playHanzi(event) {
+      let _this = this;
+      _this.writer.animateCharacter();
+      event.stopPropagation();
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.strockplay-redInner {
+  position: relative;
+  box-sizing: border-box;
+  width: 128px; // 444px
+  height: 128px; // 480px
+}
+
+.character-target-div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.character-target-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.character-target-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: #dedede;
+}
+
+.strock-play-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 11px;
+  height: 11px;
+  color: #e81b1b;
+  cursor: pointer;
+}
+</style>

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

@@ -12,27 +12,27 @@
               /> -->
               <img
                 style="margin-right: 8px"
-                src="../../../../assets/icon/Left-16-normal-Black.png"
+                src="@/assets/word_detail/Left-16-normal-Black.png"
                 alt=""
                 @click="lastDetail"
                 v-if="!notshowNext"
               />
               <img
-                src="../../../../assets/icon/Right-16-normal-Black.png"
+                src="@/assets/word_detail/Right-16-normal-Black.png"
                 alt=""
                 @click="nextDetail"
                 v-if="!notshowNext"
               />
             </template>
             <img
-              style="margin-right: 0px"
+              style="margin-right: 0"
               @click="closeWordShow"
-              src="../../../../assets/icon/Cross-16-normal-Black.png"
+              src="@/assets/word_detail/Cross-16-normal-Black.png"
               alt=""
             />
           </div>
         </div>
-        <div class="wordDetail">
+        <div class="wordDetail" v-if="data.new_word_str">
           <div
             :class="[
               'bwc-Strockplay',
@@ -45,7 +45,7 @@
                 :key="conItem + detailIndex + conindex"
                 :Book_text="conItem"
                 :playStorkes="true"
-                :targetDiv="'bwcHanziIntp' + conItem + detailIndex + conindex"
+                :targetDiv="'bwcHanziIntp' + conItem + conindex"
                 :wordNum="data.new_word_str.length"
                 :themeColor="themeColor"
               />
@@ -66,7 +66,7 @@
           </p>
           <div class="wordInfor">
             <div class="yinpin">
-              <span class="pinyintext"> {{ data.pinyin.toLowerCase() }}</span>
+              <span class="pinyintext" v-html="data.pinyin.toLowerCase()"></span>
               <template v-if="data.newWordMp3">
                 <Audio :mp3="data.newWordMp3" :themeColor="themeColor" :bg="bg" :ed="ed" />
               </template>
@@ -77,7 +77,7 @@
                 <Audio :mp3="data.mp3Url" :themeColor="themeColor" :bg="bg" :ed="ed" />
               </template>
             </div>
-            <p class="jieshu" v-for="(fy, i) in data.definition_list" :key="i" v-html="fy"></p>
+            <p class="jieshu" v-html="data.definition_list"></p>
           </div>
         </div>
         <div class="zhedie-white">
@@ -155,9 +155,8 @@
 
 <script>
 import Strockplayredline from './Strockplayredline.vue';
-import Audio from './AudioRed.vue';
-import { getContent, getHZChineseInfo, getContentFile } from '../../../../api/ajax';
-import html2canvas from 'html2canvas';
+import Audio from '../../voice_matrix/components/AudioRed.vue';
+import { GetBookWebSIContent } from '@/api/app';
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -215,9 +214,9 @@ export default {
         const _this = this;
         if (val) {
           _this.initData();
-          if (_this.type == 'newWordDetail') {
-            _this.getChineseInfo();
-          }
+          // if (_this.type == 'newWordDetail') {
+          //   _this.getChineseInfo();
+          // }
         }
       },
       // 深度观察监听
@@ -226,50 +225,6 @@ export default {
   },
   //方法集合
   methods: {
-    downloadImage() {
-      var cutArea = $('.cut-area');
-      let dom = $('.liju_main');
-      let dataURL = '';
-      html2canvas(dom[0]).then((canvas) => {
-        {
-          // 将生成的 canvas 放入到 dom 中, 这里可以做画布操作
-          cutArea.append(canvas);
-          // 将操作完成的画布转化为 base64 编码的文件
-          dataURL = canvas.toDataURL('image/png');
-          // 将文件设置到下载区, 点击就能下载了
-          const a = document.createElement('a');
-          a.download = '例句.png';
-          a.href = dataURL;
-          a.click();
-          window.URL.revokeObjectURL(dataURL);
-          a.remove();
-        }
-      });
-    },
-    sortEvent(index, key) {
-      this.sortIndex = index;
-      if (this.lijuIndex == 0) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.allList[key]));
-      } else if (this.lijuIndex == 1) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list1[key]));
-      } else if (this.lijuIndex == 2) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list2[key]));
-      } else if (this.lijuIndex == 3) {
-        this.CurrentList = JSON.parse(JSON.stringify(this.list3[key]));
-      }
-    },
-    // 切换模式
-    cutPattern(index) {
-      if (index == this.lijuPatternIndex) {
-        return;
-      }
-      this.lijuPatternIndex = index;
-      if (this.lijuPatternIndex == 1) {
-        this.sortEvent(0, 'sentence_list_sort_left');
-      } else {
-        this.cutLiju(this.lijuIndex, true);
-      }
-    },
     // 切换 例句
     cutLiju(index, type) {
       if (index == this.lijuIndex && !type) {
@@ -324,6 +279,7 @@ export default {
     // 下一个单词详情
     nextDetail() {
       let _this = this;
+
       if (_this.detailIndex == _this.optionRes.length - 1) {
         this.$message.warning('当前已经是最后一个了 ');
         return;
@@ -336,7 +292,7 @@ export default {
       this.loading3 = true;
       let Mname = 'book-courseware_manager-GetCoursewareWordExampleSentenceList_Sort';
       // 获取本课的 本教材的 本套的 的例句
-      getContent(Mname, {
+      GetBookWebSIContent(Mname, {
         courseware_id: this.currentTreeID, // 课件id
         word: this.data.new_word, //生词
         search_scope: 0, //检索范围0 本课件  1本教材 2本套
@@ -387,7 +343,7 @@ export default {
             //   this.list1.sentence_list_sort_right
             // );
           }
-          getContent(Mname, {
+          GetBookWebSIContent(Mname, {
             courseware_id: this.currentTreeID, // 课件id
             word: this.data.new_word, //生词
             search_scope: 1, //检索范围0 本课件  1本教材 2本套
@@ -431,7 +387,7 @@ export default {
                 // );
               }
 
-              getContent(Mname, {
+              GetBookWebSIContent(Mname, {
                 courseware_id: this.currentTreeID, // 课件id
                 word: this.data.new_word, //生词
                 search_scope: 2, //检索范围0 本课件  1本教材 2本套
@@ -670,6 +626,14 @@ export default {
       // }</span>`;
     },
     initData() {
+      // 去掉生词里的标点
+      let new_word_str = '';
+      for (let i = 0; i < this.data.new_word.length; i++) {
+        if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
+          new_word_str += this.data.new_word[i];
+        }
+      }
+      this.data.new_word_str = new_word_str;
       this.viewIntp();
     },
     handleChangeTab(flag) {
@@ -680,10 +644,10 @@ export default {
       let data = {
         query: _this.data.new_word,
       };
-      getHZChineseInfo(data).then((res) => {
-        _this.dataDetail = res.data.result;
-        _this.handleChineseDetail();
-      });
+      // getHZChineseInfo(data).then((res) => {
+      //   _this.dataDetail = res.data.result;
+      //   _this.handleChineseDetail();
+      // });
     },
     // 处理数据
     handleChineseDetail() {
@@ -697,11 +661,11 @@ export default {
                 if (itemss.key == 'pronunciation') {
                   // 音频
                   let Mname = 'tool-TextToVoiceFile';
-                  getContentFile(Mname, {
-                    text: this.word.detail.new_word,
-                  }).then((res) => {
-                    _this.mp3Url = res.file_url;
-                  });
+                  // getContentFile(Mname, {
+                  //   text: this.word.detail.new_word,
+                  // }).then((res) => {
+                  //   _this.mp3Url = res.file_url;
+                  // });
                   // _this.data.mp3Url = itemss.objects[0]["@value"]
                   //   ? itemss.objects[0]["@value"]
                   //   : "";
@@ -714,16 +678,7 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 去掉生词里的标点
-    let new_word_str = '';
-    for (let i = 0; i < this.data.new_word.length; i++) {
-      if (/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(this.data.new_word[i])) {
-        new_word_str += this.data.new_word[i];
-      }
-    }
-    this.data.new_word_str = new_word_str;
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
@@ -751,31 +706,38 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .wordDetailModule {
-  width: 100%;
   z-index: 999;
+  width: 100%;
   overflow-y: scroll;
+
   .module-inner {
     padding: 30px 0;
+
     > div {
       width: 788px;
+      padding: 16px 32px 40px;
       margin: 0 auto;
-      background: #ffffff;
-      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+      background: #fff;
       border-radius: 8px;
-      padding: 16px 32px 40px 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 15%);
+
       .operation {
         height: 16px;
         margin-bottom: 8px;
+
         div {
           display: flex;
-          justify-content: flex-end;
           align-items: center;
+          justify-content: flex-end;
+
           > :nth-child(1) {
             margin-right: 24px;
           }
+
           > :nth-child(2) {
             margin-right: 8px;
           }
+
           > :nth-child(3) {
             margin-right: 24px;
           }
@@ -789,94 +751,112 @@ export default {
       }
     }
   }
+
   .module-bottom {
     width: 788px;
     margin-top: 16px;
   }
+
   .top {
     padding-top: 16px;
+
     .wordDetail {
-      width: 100%;
-      margin-bottom: 16px;
       display: flex;
-      justify-content: flex-start;
       align-items: flex-start;
+      justify-content: flex-start;
+      width: 100%;
+      margin-bottom: 16px;
+
       .bwc-Strockplay {
+        box-sizing: border-box;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
         min-width: 130px;
         height: 130px;
+        margin-right: 37px;
         margin-bottom: 16px;
-        border-radius: 8px;
-        box-sizing: border-box;
         overflow: hidden;
-        margin-right: 37px;
+        border-radius: 8px;
+
         .strockplay {
+          position: relative;
           display: flex;
-          justify-content: center;
           align-items: center;
-          position: relative;
+          justify-content: center;
+
           .collect-icon {
-            width: 16px;
             position: absolute;
             right: 4px;
             bottom: 4px;
+            width: 16px;
             cursor: pointer;
           }
         }
+
         .bwc-line {
           width: 2px;
           height: 128px;
         }
+
         .red-bg {
           background: #ff5757;
         }
+
         .green-bg {
           background: #24b99e;
         }
+
         .brown-bg {
           background: #bd8865;
         }
       }
+
       .bwc-tolength {
-        color: #404040;
+        padding: 40px 0;
+        margin: 0 37px 16px 0;
+        font-family: '楷体';
         font-size: 30px;
         line-height: 1.5;
-        font-family: FZJCGFKTK;
+        color: #404040;
         text-align: center;
         border: 2px solid #d47064;
         border-radius: 8px;
-        padding: 40px 0;
-        margin: 0 37px 16px 0;
       }
+
       .red-border {
         border: 2px solid #ff5757;
       }
+
       .green-border {
         border: 2px solid #24b99e;
       }
+
       .brown-border {
         border: 2px solid #bd8865;
       }
+
       .wordInfor {
         flex: 1;
+
         .yinpin {
           display: flex;
-          justify-content: flex-start;
           align-items: center;
-          margin-bottom: 16px;
+          justify-content: flex-start;
           width: fit-content;
+          margin-bottom: 16px;
+
           .pinyintext {
-            font-size: 20px;
-            line-height: 30px;
-            color: #2c2c2c;
             display: flex;
             align-items: center;
             margin-right: 8px;
-            word-break: normal;
             font-family: 'GB-PINYINOK-B';
+            font-size: 20px;
+            line-height: 30px;
+            color: #2c2c2c;
+            word-break: normal;
           }
+
           .content-voices {
             width: 16px;
           }
@@ -886,177 +866,205 @@ export default {
       p {
         margin: 0;
       }
+
       .word {
-        font-weight: bold;
         font-size: 24px;
+        font-weight: bold;
         line-height: 28px;
-        color: #000000;
+        color: #000;
       }
 
       .jieshu {
         margin-top: 16px;
         font-size: 16px;
         line-height: 19px;
-        color: #000000;
+        color: #000;
       }
     }
+
     .zhedie-white {
       width: 100%;
       margin: 0 auto;
+
       > div {
         margin-bottom: 24px;
       }
+
       .topTitle {
-        width: 100%;
         display: flex;
+        align-items: center;
         justify-content: space-between;
+        width: 100%;
         padding: 8px 12px 0;
-        align-items: center;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 10%);
         border-radius: 4px 4px 0 0;
+
         > :nth-child(1) {
-          font-weight: 500;
           font-size: 16px;
+          font-weight: 500;
           line-height: 150%;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgba(0, 0, 0, 85%);
         }
+
         > :nth-child(2) {
           display: flex;
           align-items: center;
-          font-weight: normal;
           font-size: 14px;
+          font-weight: normal;
           line-height: 22px;
-          color: rgba(0, 0, 0, 0.85);
+          color: rgba(0, 0, 0, 85%);
           cursor: pointer;
         }
+
         img {
           width: 16px;
           height: 16px;
           margin-left: 4px;
         }
+
         .rotate {
           animation-name: firstrotate;
+          animation-timing-function: linear;
           animation-direction: 2s;
           animation-fill-mode: both;
-          animation-timing-function: linear;
         }
       }
 
       .liju {
-        padding-bottom: 16px;
         padding-right: 24px;
+        padding-bottom: 16px;
         background: #f7f7f7;
-        border: 1px solid rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 10%);
         border-top: none;
         border-radius: 0 0 4px 4px;
+
         .liju_main {
           > div {
+            display: flex;
             padding-top: 16px;
             margin-left: 8px;
-            display: flex;
 
             > :nth-child(1) {
-              text-align: right;
               margin-right: 6px;
+              font-family: '楷体';
               line-height: 24px;
-              font-family: 'FZJCGFKTK';
+              text-align: right;
             }
+
             p {
               margin: 0;
-              line-height: 24px;
+              font-family: '楷体';
               font-size: 16px;
-              color: rgba(0, 0, 0, 0.85);
-              font-family: 'FZJCGFKTK';
+              line-height: 24px;
+              color: rgba(0, 0, 0, 85%);
             }
+
             .p2 {
               font-size: 12px;
               line-height: 20px;
-              color: rgba(0, 0, 0, 0.85);
+              color: rgba(0, 0, 0, 85%);
               opacity: 0.3;
             }
           }
         }
       }
+
       .merge {
         .topTitle {
           .left {
-            height: 100%;
             display: flex;
-            font-size: 12px;
             align-items: flex-end;
+            height: 100%;
+            font-size: 12px;
+
             > div {
-              padding: 0 12px 8px 12px;
+              padding: 0 12px 8px;
               cursor: pointer;
+
               > :nth-child(1) {
                 margin-right: 4px;
-                color: #000000;
+                color: #000;
               }
+
               > :nth-child(2) {
-                color: rgba(0, 0, 0, 0.5);
+                color: rgba(0, 0, 0, 50%);
               }
             }
+
             .sele {
               border-bottom: 1px solid #ff5757;
+
               > :nth-child(1) {
                 color: #ff5757;
               }
+
               > :nth-child(2) {
-                color: rgba(255, 87, 87, 0.5);
+                color: rgba(255, 87, 87, 50%);
               }
             }
           }
+
           .right {
+            display: flex;
             width: 144px;
             height: 28px;
-            display: flex;
-            background: #eeeeee;
-            border-radius: 4px;
             padding: 2px;
+            background: #eee;
+            border-radius: 4px;
+
             > div {
               width: 76px;
               height: 24px;
-              color: #888888;
-              text-align: center;
               line-height: 24px;
+              color: #888;
+              text-align: center;
               cursor: pointer;
             }
+
             .sele {
-              background: #ffffff;
-              box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.08);
-              color: #000000;
+              color: #000;
+              background: #fff;
+              box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
             }
           }
         }
+
         .KWIC_liju {
           padding-top: 16px;
+
           > div {
             margin-left: 24px;
           }
+
           .sort_dv {
-            margin-left: 24px;
             display: flex;
+            margin-left: 24px;
+
             span {
               display: inline-block;
-              width: 28px;
-              height: 28px;
-              background: #ffffff;
-              border-radius: 4px;
               display: flex;
-              justify-content: center;
               align-items: center;
-              cursor: pointer;
+              justify-content: center;
+              width: 28px;
+              height: 28px;
               margin-right: 8px;
+              cursor: pointer;
+              background: #fff;
+              border-radius: 4px;
             }
+
             .sele {
               background: #f0f0f0;
             }
+
             .sort {
               img {
                 width: 14px;
                 height: 12px;
               }
             }
+
             .down {
               img {
                 width: 16px;
@@ -1067,40 +1075,47 @@ export default {
 
           .liju_main {
             margin-top: 24px;
+
             > div {
-              margin-top: 0;
-              padding: 0;
-              height: 26px;
               display: flex;
+              height: 26px;
+              padding: 0;
+              margin-top: 0;
+
               > div {
                 display: flex;
               }
+
               > :nth-child(1) {
+                justify-content: flex-end;
                 width: 16px;
                 margin-right: 16px;
-                justify-content: flex-end;
               }
+
               .p1 {
                 width: 117px;
+
                 // white-space: nowrap;
                 // overflow: hidden;
                 // text-overflow: ellipsis;
                 font-size: 12px;
               }
+
               .p2 {
-                font-family: 'FZJCGFKTK';
+                display: flex;
+                justify-content: center;
                 width: 469px;
                 height: 22px;
                 margin-left: 16px;
-                font-weight: 400;
+                overflow: hidden;
+                font-family: '楷体';
                 font-size: 14px;
+                font-weight: 400;
                 line-height: 22px;
-                color: #000000;
-                opacity: 1;
-                display: flex;
-                justify-content: center;
-                overflow: hidden;
+                color: #000;
                 white-space: nowrap;
+                opacity: 1;
+
                 > :nth-child(1) {
                   // direction: rtl;
                   // unicode-bidi: plaintext;
@@ -1108,16 +1123,17 @@ export default {
                   display: flex;
                   justify-content: end;
                   width: 224px;
-                  white-space: nowrap;
                   overflow: hidden;
+                  white-space: nowrap;
                 }
+
                 > :nth-child(3) {
-                  direction: ltr;
-                  unicode-bidi: plaintext;
-                  text-align: left;
                   width: 224px;
-                  white-space: nowrap;
                   overflow: hidden;
+                  text-align: left;
+                  white-space: nowrap;
+                  direction: ltr;
+                  unicode-bidi: plaintext;
                 }
               }
             }
@@ -1126,71 +1142,86 @@ export default {
       }
     }
   }
+
   .bottom {
-    margin-top: 16px;
     padding-bottom: 23px;
+    margin-top: 16px;
+
     .from {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
       //   text-align: right;
       margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
-      color: #000000;
+      color: #000;
       opacity: 0.2;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
+
       img {
         width: 24px;
         margin-left: 24px;
       }
     }
+
     .wordDetail {
       width: 538px;
-      margin-left: 40px;
       padding-bottom: 23px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      margin-left: 40px;
+      border-bottom: 1px solid rgba(0, 0, 0, 10%);
+
       p {
         margin: 0;
       }
+
       .word {
-        font-weight: bold;
         font-size: 24px;
+        font-weight: bold;
         line-height: 28px;
-        color: #000000;
+        color: #000;
       }
+
       .yinpin {
+        display: flex;
+        margin-top: 16px;
         font-size: 16px;
         line-height: 150%;
-        color: #000000;
-        margin-top: 16px;
-        display: flex;
+        color: #000;
+
         > div {
-          height: 24px;
           display: flex;
           align-items: center;
+          height: 24px;
+
           > :nth-child(1) {
             margin-right: 5px;
           }
         }
+
         > :nth-child(2) {
           margin-left: 27px;
         }
+
         img {
-          margin-left: 10px;
           width: 24px;
           height: 24px;
+          margin-left: 10px;
           cursor: pointer;
         }
       }
+
       .jieshu {
+        display: flex;
         margin-top: 16px;
         font-size: 16px;
         line-height: 150%;
-        color: #000000;
-        display: flex;
+        color: #000;
+
         > :nth-child(1) {
           width: 30px;
         }
+
         :nth-child(2) {
           width: 524px;
         }
@@ -1204,44 +1235,44 @@ export default {
 .is-dark {
   z-index: 99999 !important;
 }
+
 .NPC-Big-Book-preview-red {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }
 }
+
 .NPC-Big-Book-preview-green {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }
 }
+
 .NPC-Big-Book-preview-brown {
   .wordDetailChs {
     .zhedie-white {
       .topTitle {
+        box-sizing: border-box;
         height: 40px;
         background: #fff !important;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-radius: 8px 8px 0px 0px;
+        border: 1px solid rgba(0, 0, 0, 10%);
+        border-radius: 8px 8px 0 0;
       }
     }
   }