1、修改刷新问题 2、优化预览组件

src/enterPage.vue

@@ -21,7 +21,9 @@ export default {
   },
   created() {
     if (process.env.NODE_ENV === 'production') {
-      updateBaseURL(`${window.location.origin}/`);
+      let serverAddress = `${window.location.origin}/`;
+      setLocalStore('server_address', serverAddress);
+      updateBaseURL(serverAddress);
     }
     this.checkIdentityCode();
   },

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -420,7 +420,7 @@ export default {
         backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
         backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
         backgroundImage: bcImgUrl ? `url(${bcImgUrl})` : '',
-        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back.image_opacity / 100})` : '',
+        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back?.image_opacity / 100})` : '',
       };
 
       if (back) {

src/views/book/courseware/preview/common/AnswerAnalysis.vue

@@ -18,7 +18,7 @@
     </div>
 
     <!-- 参考答案 -->
-    <template v-if="answerList.length > 0">
+    <template v-if="answerList?.length > 0">
       <div v-for="(item, i) in answerList" :key="`answer-${i}`" class="answer-list">
         <div class="answer">
           <div class="answer-title">
@@ -31,7 +31,6 @@
               v-for="file in item.answer_audio_list"
               :key="file.file_id"
               :file-id="file.file_id"
-              :file-name="file.file_name.slice(0, file.file_name.lastIndexOf('.'))"
               :audio-index="i"
             />
           </div>
@@ -48,6 +47,7 @@
               v-for="(file, j) in item.answer_video_list"
               :key="file.file_id"
               view-size="small"
+              view-method="independent"
               :file-id="file.file_id"
               :cur-video-index="j"
             />
@@ -57,7 +57,7 @@
     </template>
 
     <!-- 解析 -->
-    <template v-if="analysisList.length > 0">
+    <template v-if="analysisList?.length > 0">
       <div v-for="(item, i) in analysisList" :key="`analysis-${i}`" class="analysis-list">
         <div class="analysis">
           <div class="analysis-title">
@@ -264,6 +264,10 @@ export default {
   .el-dialog__body {
     max-height: 75vh;
     overflow: auto;
+
+    .audio-name {
+      display: none;
+    }
   }
 }
 </style>

src/views/book/courseware/preview/components/dialogue_article/RemarkChs.vue

@@ -6,9 +6,14 @@
       (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length > 0))
     "
     class="remarkChs"
-    :style="{ top: marginTop ? marginTop + 'px' : '0px' }"
+    :style="{ top: marginTop ? marginTop + 'px' : '0px', backgroundColor: remarkDetail.enBg ? remarkDetail.enBg : '' }"
   >
-    <div v-if="remarkDetail.chs" class="remark-chs" v-html="convertText(sanitizeHTML(remarkDetail.chs))"></div>
+    <div
+      :style="{ backgroundColor: remarkDetail.chsBg ? remarkDetail.chsBg : '' }"
+      v-if="remarkDetail.chs"
+      class="remark-chs"
+      v-html="convertText(sanitizeHTML(remarkDetail.chs))"
+    ></div>
     <div v-if="remarkDetail.en" class="remark-en" v-html="convertText(sanitizeHTML(remarkDetail.en))"></div>
     <div v-if="remarkDetail.img_list && remarkDetail.img_list.length > 0" class="remark-img">
       <el-image
@@ -59,7 +64,7 @@ export default {
   position: absolute;
   top: 0;
   box-sizing: border-box;
-  width: 95%;
+  width: 90%;
 
   // border: 1px solid rgba(0, 0, 0, 10%);
   border-radius: 8px;
@@ -68,10 +73,12 @@ export default {
   > .remark-chs {
     box-sizing: border-box;
     display: flex;
+    flex-flow: wrap;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 34px;
+    padding: 0 8px;
     font-size: 14px;
     font-weight: normal;
     line-height: 22px;
@@ -82,6 +89,7 @@ export default {
     border-radius: 8px 8px 0 0;
 
     :deep p {
+      width: 100%;
       margin: 0;
     }
   }
@@ -89,6 +97,7 @@ export default {
   > .remark-en {
     box-sizing: border-box;
     min-height: 34px;
+    padding: 0 8px;
     font-size: 14px;
     line-height: 22px;
     color: #000;

src/views/book/courseware/preview/components/matching/MatchingPreview.vue

@@ -6,32 +6,35 @@
     <div class="main">
       <ul ref="list" class="option-list">
         <li v-for="(item, i) in data.option_list" :key="i" class="list-item">
-          <div
-            v-for="({ content, mark, multilingual, paragraph_list }, j) in item"
-            :key="mark"
-            :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark, i, j), { isMobile: isMobile }]"
-            :style="{
-              cursor: disabled ? 'default' : 'pointer',
-              flex: isMobile ? '0 1 auto' : '',
-              width: isMobile ? 'calc(50% - 8px)' : '',
-              overflow: isMobile ? 'auto' : '',
-            }"
-            @mousedown="mousedown($event, i, j, mark)"
-            @mouseup="mouseup($event, i, j, mark)"
-            @click="handleClickConnection($event, i, j, mark)"
-          >
-            <PinyinText
-              v-if="isEnable(data.property.view_pinyin)"
-              class="content"
-              :paragraph-list="paragraph_list"
-              :pinyin-position="data.property.pinyin_position"
-              :is-preview="true"
-            />
-            <span v-else class="content rich-text" v-html="convertText(sanitizeHTML(content))"></span>
-            <div v-if="showLang" class="lang">
-              {{ multilingual.find((item) => item.type === getLang())?.translation }}
+          <template v-for="({ content, mark, multilingual, paragraph_list }, j) in item">
+            <div
+              v-if="content"
+              :key="mark"
+              :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark, i, j), { isMobile: isMobile }]"
+              :style="{
+                cursor: disabled ? 'default' : 'pointer',
+                flex: isMobile ? '0 1 auto' : '',
+                width: isMobile ? 'calc(50% - 8px)' : '',
+                overflow: isMobile ? 'auto' : '',
+              }"
+              @mousedown="mousedown($event, i, j, mark)"
+              @mouseup="mouseup($event, i, j, mark)"
+              @click="handleClickConnection($event, i, j, mark)"
+            >
+              <PinyinText
+                v-if="isEnable(data.property.view_pinyin)"
+                class="content"
+                :paragraph-list="paragraph_list"
+                :pinyin-position="data.property.pinyin_position"
+                :is-preview="true"
+              />
+              <span v-else class="content rich-text" v-html="convertText(sanitizeHTML(content))"></span>
+              <div v-if="showLang" class="lang">
+                {{ multilingual.find((item) => item.type === getLang())?.translation }}
+              </div>
             </div>
-          </div>
+            <div v-else :key="mark" style="width: calc(50% - 36px)"></div>
+          </template>
         </li>
       </ul>
     </div>
@@ -542,26 +545,22 @@ export default {
 
     .list-item {
       display: flex;
-      column-gap: 8px;
+      column-gap: 72px;
       align-items: stretch;
       padding: 1px;
 
       .item-wrapper {
         position: relative;
         display: flex;
-        flex: 1;
         flex-wrap: wrap;
         column-gap: 24px;
         align-items: center;
+        width: calc(50% - 36px);
         min-height: 48px;
         padding: 12px 24px;
         background-color: $content-color;
         border-radius: 4px;
 
-        &:not(:last-child, .isMobile) {
-          margin-right: 64px;
-        }
-
         &.focus {
           background-color: #dcdbdd;
         }

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="click">
+              <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"
                               >
@@ -249,14 +453,22 @@
                               <p
                                 class="NPC-word-tab-common NPC-word-tab-cixing"
                                 :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
+                                :style="{
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                }"
                                 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 +478,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 +496,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 +520,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,11 +535,17 @@
                               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' : '']"
                                 v-html="convertText(sanitizeHTML(sItem.cixing))"
+                                :style="{
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                }"
                               ></p>
 
                               <span
@@ -342,10 +563,16 @@
                           </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))"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
                           ></p>
                           <span
                             v-if="
@@ -359,10 +586,18 @@
                             {{ 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
+                            ><b
+                              v-html="convertText(sanitizeHTML(sItem.collocation))"
+                              :style="{
+                                fontSize:
+                                  data.unified_attrib && data.unified_attrib.font_size
+                                    ? data.unified_attrib.font_size
+                                    : '',
+                              }"
+                            ></b
                           ></span>
                           <span v-if="showLang" class="">
                             {{
@@ -374,11 +609,19 @@
                             }}
                           </span>
                         </div>
-                        <div v-if="sItem.liju_list">
+                        <div v-if="sItem.liju_list && showObj.liju">
                           <span class="collocation"
                             ><span>{{ convertText('例句：') }}</span>
                             <div>
-                              <b v-html="convertText(sanitizeHTML(sItem.liju_list))"></b>
+                              <b
+                                v-html="convertText(sanitizeHTML(sItem.liju_list))"
+                                :style="{
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                }"
+                              ></b>
                             </div>
                           </span>
                           <span v-if="showLang" class="">
@@ -427,6 +670,7 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            marginTop: voiceTop,
                           }"
                           @click="handleChangeTime(sItem.bg, sItem.ed)"
                         />
@@ -439,6 +683,7 @@
                               data.unified_attrib && data.unified_attrib.topic_color
                                 ? data.unified_attrib.topic_color
                                 : '',
+                            marginTop: voiceTop,
                           }"
                           @click="handleChangeTime(sItem.bg, sItem.ed)"
                         />
@@ -457,6 +702,7 @@
                                 data.unified_attrib && data.unified_attrib.topic_color
                                   ? data.unified_attrib.topic_color
                                   : '',
+                              marginTop: voiceTop,
                             }"
                           />
                           <SvgIcon
@@ -468,6 +714,7 @@
                                 data.unified_attrib && data.unified_attrib.topic_color
                                   ? data.unified_attrib.topic_color
                                   : '',
+                              marginTop: voiceTop,
                             }"
                           />
                         </span>
@@ -487,10 +734,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 +750,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 +771,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 +794,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,10 +803,16 @@
                             {{ 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' : '']"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
                             v-html="convertText(sanitizeHTML(sItem.cixing))"
                           ></p>
                           <span
@@ -574,10 +827,16 @@
                             {{ 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))"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
                           ></p>
                           <span
                             v-if="
@@ -594,7 +853,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 +876,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 +902,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,10 +918,16 @@
                           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' : '']"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
                             v-html="convertText(sanitizeHTML(sItem.cixing))"
                           ></p>
 
@@ -674,10 +943,16 @@
                             {{ 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))"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
                           ></p>
                           <span
                             v-if="
@@ -712,10 +987,21 @@
                         </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
+                          ><b
+                            v-html="convertText(sanitizeHTML(sItem.collocation))"
+                            :style="{
+                              fontSize:
+                                data.unified_attrib && data.unified_attrib.font_size
+                                  ? data.unified_attrib.font_size
+                                  : '',
+                            }"
+                          ></b
                         ></span>
                         <span v-if="showLang" class="">
                           {{
@@ -727,11 +1013,19 @@
                           }}
                         </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>
-                            <b v-html="convertText(sanitizeHTML(sItem.liju_list))"></b>
+                            <b
+                              v-html="convertText(sanitizeHTML(sItem.liju_list))"
+                              :style="{
+                                fontSize:
+                                  data.unified_attrib && data.unified_attrib.font_size
+                                    ? data.unified_attrib.font_size
+                                    : '',
+                              }"
+                            ></b>
                           </div>
                         </span>
                         <span v-if="showLang" class="">
@@ -1149,8 +1443,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 +1526,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 +1648,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 +1938,7 @@ export default {
   }
 
   .NPC-word-tab-box {
-    width: 240px;
+    // width: 240px;
 
     span {
       display: block;
@@ -1937,6 +2305,7 @@ export default {
 
             .strock-play-box,
             .playStorkes-btn {
+              z-index: 2 !important; // 1时点不了 所以只能为2
               width: 9px !important;
               height: 9px !important;
             }
@@ -2113,8 +2482,8 @@ export default {
 
   .hz-box {
     display: flex;
-    flex-flow: wrap;
-    width: max-content;
+    max-width: 223px;
+    overflow-x: auto;
   }
 
   .writeTop-item {
@@ -2124,6 +2493,11 @@ export default {
   .writeTop-item-noLeft {
     border-left: none;
   }
+
+  :deep .el-popover__reference-wrapper {
+    display: block;
+    height: 24px;
+  }
 }
 
 .newWord-table {
@@ -2257,10 +2631,6 @@ export default {
         width: 20px;
         height: 20px;
       }
-
-      .svg-icon {
-        color: #fff;
-      }
     }
 
     img {
@@ -2377,4 +2747,16 @@ export default {
     padding: 4px 0;
   }
 }
+
+.show-obj-list {
+  display: flex;
+  flex-flow: wrap;
+  gap: 5px;
+  padding: 0;
+
+  li {
+    width: 100%;
+    cursor: pointer;
+  }
+}
 </style>

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

@@ -109,7 +109,7 @@ export default {
     position: absolute;
     top: 0;
     right: 0;
-    z-index: 1;
+    z-index: 2; // 1时点不了 所以只能为2
     cursor: pointer;
   }
 }

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

@@ -125,7 +125,7 @@ export default {
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 1;
+  z-index: 2; // 1时点不了 所以只能为2
   display: flex;
   align-items: center;
   justify-content: center;

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -133,9 +133,22 @@
                   </span>
                 </div>
               </div>
-              <div class="NPC-notes-trans" v-html="convertText(sanitizeHTML(item.interpret))"></div>
-
-              <div v-if="item.note" class="NPC-notes-note" v-html="convertText(sanitizeHTML(item.note))"></div>
+              <div
+                class="NPC-notes-trans"
+                :style="{
+                  fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+                }"
+                v-html="convertText(sanitizeHTML(item.interpret))"
+              ></div>
+
+              <div
+                v-if="item.note"
+                class="NPC-notes-note"
+                :style="{
+                  fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
+                }"
+                v-html="convertText(sanitizeHTML(item.note))"
+              ></div>
               <div v-if="item.file_list[0]" class="NPC-notes-note-img">
                 <el-image
                   :src="item.file_list[0].file_url"