生词预览各列隐藏及播放按钮和序号对齐

src/icons/svg/list2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1773629292487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8602" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 139.6368l0 93.0912 1024 0L1024 139.6368 0 139.6368zM0 558.5456l1024 0 0-93.0912L0 465.4544 0 558.5456zM0 884.3632l1024 0 0-93.0912L0 791.272 0 884.3632z" fill="currentColor" p-id="8603"></path></svg>

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

@@ -43,6 +43,203 @@
           </div>
 
           <div class="NPC-top-right">
+            <el-popover placement="right-start" width="60" trigger="hover">
+              <ul class="show-obj-list">
+                <li @click="handleShow('pinyin')">
+                  <span>拼音</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.pinyin"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+                <li @click="handleShow('newWord')">
+                  <span>生词</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.newWord"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+                <li @click="handleShow('cixing')">
+                  <span>词性</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.cixing"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+                <li @click="handleShow('shiyi')">
+                  <span>释义</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.shiyi"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+                <li @click="handleShow('collocation')">
+                  <span>搭配</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.collocation"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+                <li @click="handleShow('liju')">
+                  <span>例句</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj.liju"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
+              </ul>
+              <SvgIcon
+                slot="reference"
+                v-if="is_list"
+                icon-class="list2"
+                size="24"
+                :style="{
+                  color:
+                    data.unified_attrib && data.unified_attrib.topic_color
+                      ? data.unified_attrib.topic_color
+                      : '#de4444',
+                }"
+              />
+            </el-popover>
+
             <SvgIcon
               v-if="is_list"
               icon-class="icon-card"
@@ -109,7 +306,7 @@
                   >
                     <template v-if="isMobile">
                       <div class="content-box">
-                        <div style="display: flex; flex-flow: wrap; gap: 10px; align-items: center; width: 100%">
+                        <div style="display: flex; flex-flow: wrap; gap: 10px; width: 100%">
                           <template v-if="sItem.bg || sItem.ed">
                             <!-- <a
                         :class="['play-btn', curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '']"
@@ -124,6 +321,7 @@
                                   data.unified_attrib && data.unified_attrib.topic_color
                                     ? data.unified_attrib.topic_color
                                     : '',
+                                marginTop: voiceTop,
                               }"
                               @click="handleChangeTime(sItem.bg, sItem.ed)"
                             />
@@ -136,6 +334,7 @@
                                   data.unified_attrib && data.unified_attrib.topic_color
                                     ? data.unified_attrib.topic_color
                                     : '',
+                                marginTop: voiceTop,
                               }"
                               @click="handleChangeTime(sItem.bg, sItem.ed)"
                             />
@@ -154,6 +353,7 @@
                                     data.unified_attrib && data.unified_attrib.topic_color
                                       ? data.unified_attrib.topic_color
                                       : '',
+                                  marginTop: voiceTop,
                                 }"
                               />
                               <SvgIcon
@@ -165,6 +365,7 @@
                                     data.unified_attrib && data.unified_attrib.topic_color
                                       ? data.unified_attrib.topic_color
                                       : '',
+                                  marginTop: voiceTop,
                                 }"
                               />
                             </span>
@@ -184,6 +385,7 @@
                                     data.unified_attrib && data.unified_attrib.topic_color
                                       ? data.unified_attrib.topic_color
                                       : '',
+                                  marginTop: tabNumTop,
                                 }"
                                 >{{ index + 1 }}</b
                               >
@@ -198,7 +400,7 @@
                           >
                             <div class="NPC-word-tab-box">
                               <span
-                                v-if="data.property.pinyin_position == 'top'"
+                                v-if="data.property.pinyin_position == 'top' && showObj.pinyin"
                                 class="NPC-word-tab-common NPC-word-tab-pinyin"
                                 :style="{
                                   fontSize:
@@ -217,12 +419,13 @@
                                       ? data.unified_attrib.font_size
                                       : '',
                                 }"
+                                v-if="showObj.newWord"
                                 class="NPC-word-tab-common NPC-word-tab-word"
                                 v-html="convertText(sanitizeHTML(sItem.new_word))"
                               >
                               </span>
                               <span
-                                v-if="data.property.pinyin_position == 'bottom'"
+                                v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin"
                                 class="NPC-word-tab-common NPC-word-tab-pinyin"
                                 :style="{
                                   fontSize:
@@ -238,7 +441,8 @@
                                   showLang &&
                                   multilingualTextList[getLang()] &&
                                   multilingualTextList[getLang()][index] &&
-                                  multilingualTextList[getLang()][index][0]
+                                  multilingualTextList[getLang()][index][0] &&
+                                  showObj.newWord
                                 "
                                 class="NPC-word-tab-common"
                               >
@@ -250,13 +454,15 @@
                                 class="NPC-word-tab-common NPC-word-tab-cixing"
                                 :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
                                 v-html="convertText(sanitizeHTML(sItem.cixing))"
+                                v-if="showObj.cixing"
                               ></p>
                               <span
                                 v-if="
                                   showLang &&
                                   multilingualTextList[getLang()] &&
                                   multilingualTextList[getLang()][index] &&
-                                  multilingualTextList[getLang()][index][1]
+                                  multilingualTextList[getLang()][index][1] &&
+                                  showObj.cixing
                                 "
                                 class="NPC-word-tab-common"
                               >
@@ -266,7 +472,10 @@
                           </template>
                           <template v-else>
                             <span
-                              v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
+                              v-if="
+                                (!data.property.pinyin_position || data.property.pinyin_position == 'front') &&
+                                showObj.pinyin
+                              "
                               class="NPC-word-tab-common NPC-word-tab-pinyin"
                               :style="{
                                 fontSize:
@@ -281,7 +490,7 @@
                               v-html="sItem.pinyin"
                             >
                             </span>
-                            <span>
+                            <span v-if="showObj.newWord">
                               <p
                                 class="NPC-word-tab-common NPC-word-tab-word"
                                 :style="{
@@ -305,7 +514,7 @@
                               </span>
                             </span>
                             <span
-                              v-if="data.property.pinyin_position == 'back'"
+                              v-if="data.property.pinyin_position == 'back' && showObj.pinyin"
                               class="NPC-word-tab-common NPC-word-tab-pinyin"
                               :style="{
                                 fontSize:
@@ -320,7 +529,7 @@
                               v-html="sItem.pinyin"
                             >
                             </span>
-                            <span>
+                            <span v-if="showObj.cixing">
                               <p
                                 class="NPC-word-tab-common NPC-word-tab-cixing"
                                 :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -342,7 +551,7 @@
                           </template>
                         </div>
 
-                        <span>
+                        <span v-if="showObj.shiyi">
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -359,7 +568,7 @@
                             {{ multilingualTextList[getLang()][index][2] }}
                           </span>
                         </span>
-                        <div v-if="sItem.collocation">
+                        <div v-if="sItem.collocation && showObj.collocation">
                           <span class="collocation"
                             ><span>{{ convertText('搭配：') }}</span
                             ><b v-html="convertText(sanitizeHTML(sItem.collocation))"></b
@@ -374,7 +583,7 @@
                             }}
                           </span>
                         </div>
-                        <div v-if="sItem.liju_list">
+                        <div v-if="sItem.liju_list && showObj.liju">
                           <span class="collocation"
                             ><span>{{ convertText('例句：') }}</span>
                             <div>
@@ -427,6 +636,7 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            marginTop: voiceTop,
                           }"
                           @click="handleChangeTime(sItem.bg, sItem.ed)"
                         />
@@ -439,6 +649,7 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            marginTop: voiceTop,
                           }"
                           @click="handleChangeTime(sItem.bg, sItem.ed)"
                         />
@@ -457,6 +668,7 @@
                                 data.unified_attrib && data.unified_attrib.topic_color
                                   ? data.unified_attrib.topic_color
                                   : '',
+                              marginTop: voiceTop,
                             }"
                           />
                           <SvgIcon
@@ -468,6 +680,7 @@
                                 data.unified_attrib && data.unified_attrib.topic_color
                                   ? data.unified_attrib.topic_color
                                   : '',
+                              marginTop: voiceTop,
                             }"
                           />
                         </span>
@@ -487,10 +700,8 @@
                                 data.unified_attrib && data.unified_attrib.topic_color
                                   ? data.unified_attrib.topic_color
                                   : '',
-                              marginTop:
-                                data.unified_attrib && data.unified_attrib.font_size
-                                  ? (((data.unified_attrib.font_size.replace('pt', '') * 1.5) / 3) * 4 - 16) / 2 + 'px'
-                                  : '',
+
+                              marginTop: tabNumTop,
                             }"
                             >{{ index + 1 }}</b
                           >
@@ -505,7 +716,7 @@
                       >
                         <div class="NPC-word-tab-box">
                           <span
-                            v-if="data.property.pinyin_position == 'top'"
+                            v-if="data.property.pinyin_position == 'top' && showObj.pinyin"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
@@ -526,12 +737,13 @@
                                   ? data.unified_attrib.font_size
                                   : '',
                             }"
+                            v-if="showObj.newWord"
                             class="NPC-word-tab-common NPC-word-tab-word"
                             v-html="convertText(sanitizeHTML(sItem.new_word))"
                           >
                           </span>
                           <span
-                            v-if="data.property.pinyin_position == 'bottom'"
+                            v-if="data.property.pinyin_position == 'bottom' && showObj.pinyin"
                             class="NPC-word-tab-common NPC-word-tab-pinyin"
                             :style="{
                               width: data.col_width[0].value + 'px',
@@ -548,7 +760,8 @@
                               showLang &&
                               multilingualTextList[getLang()] &&
                               multilingualTextList[getLang()][index] &&
-                              multilingualTextList[getLang()][index][0]
+                              multilingualTextList[getLang()][index][0] &&
+                              showObj.newWord
                             "
                             class="NPC-word-tab-common"
                             :style="{ width: data.col_width[0].value + 'px' }"
@@ -556,7 +769,7 @@
                             {{ multilingualTextList[getLang()][index][0] }}
                           </span>
                         </div>
-                        <span :style="{ width: data.col_width[2].value + 'px' }">
+                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -574,7 +787,7 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }">
+                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -594,7 +807,10 @@
                       </template>
                       <template v-else>
                         <span
-                          v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
+                          v-if="
+                            (!data.property.pinyin_position || data.property.pinyin_position == 'front') &&
+                            showObj.pinyin
+                          "
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
@@ -614,6 +830,7 @@
                           :style="{
                             width: data.col_width[0].value + 'px',
                           }"
+                          v-if="showObj.newWord"
                         >
                           <p
                             class="NPC-word-tab-common NPC-word-tab-word"
@@ -639,7 +856,7 @@
                           </span>
                         </span>
                         <span
-                          v-if="data.property.pinyin_position == 'back'"
+                          v-if="data.property.pinyin_position == 'back' && showObj.pinyin"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           :style="{
                             width: data.col_width[1].value + 'px',
@@ -655,7 +872,7 @@
                           v-html="sItem.pinyin"
                         >
                         </span>
-                        <span :style="{ width: data.col_width[2].value + 'px' }">
+                        <span :style="{ width: data.col_width[2].value + 'px' }" v-if="showObj.cixing">
                           <p
                             class="NPC-word-tab-common NPC-word-tab-cixing"
                             :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
@@ -674,7 +891,7 @@
                             {{ multilingualTextList[getLang()][index][1] }}
                           </span>
                         </span>
-                        <span :style="{ width: data.col_width[3].value + 'px' }">
+                        <span :style="{ width: data.col_width[3].value + 'px' }" v-if="showObj.shiyi">
                           <p
                             class="NPC-word-tab-common NPC-word-tab-def"
                             v-html="convertText(sanitizeHTML(sItem.def_str))"
@@ -712,7 +929,10 @@
                         </span>
                       </div>
 
-                      <div v-if="sItem.collocation" :style="{ width: data.col_width[4].value + 'px' }">
+                      <div
+                        v-if="sItem.collocation && showObj.collocation"
+                        :style="{ width: data.col_width[4].value + 'px' }"
+                      >
                         <span class="collocation"
                           ><span>{{ convertText('搭配：') }}</span
                           ><b v-html="convertText(sanitizeHTML(sItem.collocation))"></b
@@ -727,7 +947,7 @@
                           }}
                         </span>
                       </div>
-                      <div v-if="sItem.liju_list" :style="{ width: data.col_width[5].value + 'px' }">
+                      <div v-if="sItem.liju_list && showObj.liju" :style="{ width: data.col_width[5].value + 'px' }">
                         <span class="collocation"
                           ><span>{{ convertText('例句：') }}</span>
                           <div>
@@ -1149,8 +1369,52 @@ export default {
       showIndex: 0, // 卡片放大索引
       dataHeight: 0, // 组件列表中容器高度
       hasVoice: false, // 整体是否有读音
+      showObj: {
+        pinyin: true,
+        newWord: true,
+        cixing: true,
+        shiyi: true,
+        collocation: true,
+        liju: true,
+      },
     };
   },
+  computed: {
+    voiceTop() {
+      let height = 0;
+      if (this.data.property.pinyin_position && this.data.property.pinyin_position == 'top') {
+        height = 24;
+        if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
+          height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (18 * 3) / 4) / 2;
+          if (this.data.unified_attrib && this.data.unified_attrib.pinyin_size) {
+            height += this.data.unified_attrib.pinyin_size.replace('pt', '') * 1.5;
+          }
+        }
+      } else {
+        if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
+          height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (24 * 3) / 4) / 2;
+        }
+      }
+      return `${height}pt`;
+    },
+    tabNumTop() {
+      let height = 0;
+      if (this.data.property.pinyin_position && this.data.property.pinyin_position == 'top') {
+        height = 24;
+        if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
+          height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (10 * 3) / 4) / 2;
+          if (this.data.unified_attrib && this.data.unified_attrib.pinyin_size) {
+            height += this.data.unified_attrib.pinyin_size.replace('pt', '') * 1.5;
+          }
+        }
+      } else {
+        if (this.data.unified_attrib && this.data.unified_attrib.font_size) {
+          height = (this.data.unified_attrib.font_size.replace('pt', '') * 1.5 - (16 * 3) / 4) / 2;
+        }
+      }
+      return `${height}pt`;
+    },
+  },
   watch: {
     data: {
       handler(val, oldVal) {
@@ -1188,6 +1452,25 @@ export default {
     this.dataHeight = this.$refs.previewContainer.style.height;
   },
   methods: {
+    handleShow(obj) {
+      this.showObj[obj] = !this.showObj[obj];
+      this.rowWidth = 0;
+      this.data.col_width.forEach((item, index) => {
+        if (
+          this.data.property.pinyin_position &&
+          (this.data.property.pinyin_position == 'top' || this.data.property.pinyin_position == 'bottom')
+        ) {
+          if (index < 2) {
+            this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
+          } else {
+            this.rowWidth += Number(item.value);
+          }
+        } else {
+          this.rowWidth += Number(item.value);
+        }
+      });
+      this.rowWidth += 132;
+    },
     palyAudio(url, sIndex) {
       this.stopAudio();
       let mp3 = url;
@@ -1291,8 +1574,19 @@ export default {
     initData() {
       this.hasVoice = false;
       this.rowWidth = 0;
-      this.data.col_width.forEach((item) => {
-        this.rowWidth += Number(item.value);
+      this.data.col_width.forEach((item, index) => {
+        if (
+          this.data.property.pinyin_position &&
+          (this.data.property.pinyin_position == 'top' || this.data.property.pinyin_position == 'bottom')
+        ) {
+          if (index < 2) {
+            this.rowWidth = this.rowWidth > Number(item.value) ? this.rowWidth : Number(item.value);
+          } else {
+            this.rowWidth += Number(item.value);
+          }
+        } else {
+          this.rowWidth += Number(item.value);
+        }
       });
       this.rowWidth += 132;
       this.is_change = true;
@@ -1570,7 +1864,7 @@ export default {
   }
 
   .NPC-word-tab-box {
-    width: 240px;
+    // width: 240px;
 
     span {
       display: block;
@@ -2124,6 +2418,11 @@ export default {
   .writeTop-item-noLeft {
     border-left: none;
   }
+
+  :deep .el-popover__reference-wrapper {
+    display: block;
+    height: 24px;
+  }
 }
 
 .newWord-table {
@@ -2257,10 +2556,6 @@ export default {
         width: 20px;
         height: 20px;
       }
-
-      .svg-icon {
-        color: #fff;
-      }
     }
 
     img {
@@ -2377,4 +2672,16 @@ export default {
     padding: 4px 0;
   }
 }
+
+.show-obj-list {
+  display: flex;
+  flex-flow: wrap;
+  gap: 5px;
+  padding: 0;
+
+  li {
+    width: 100%;
+    cursor: pointer;
+  }
+}
 </style>